按下按钮时，访问Div A按钮包裹

Question

我目前正在设计一个将加载在可用项目列表中的网站。我正在使用EJS从数据库中动态加载项目并将其显示在单独的DIV中。但是，我希望用户能够从列表中选择其中一个项目。我已经在每个Divs上添加了一个按钮，但是我不确定如何制作它，以便按下按钮时，它访问了DIV的嵌套。

在下面

    <%for(var i = 0; i<groups.length; i++){%>
    <div class="col-md-4">
      <div class="card rider-card">
        <div class="card-body">
          <h4 class="card-title">Text Here</h4>
          <h5 class="card-subtitle mb-2 text-muted">Text Here</h5>
          <h6 class="card-text">___ spots available</h6>
          <p class="card-text">Text Here</p>
          <a onclick="selectDriver()" class="stretched-link"></a>
        </div>
      </div>
    </div>
    <%}%>

代码 数据库中的数据，并将集合称为组。我迭代组并为每个组创建一张新卡。因为我正在动态生成Divs，所以我似乎找不到一种区分它们的方法。该按钮是锚标签，适用于整个卡。

有没有办法仅访问锚标签嵌套的卡？

Answer 1

您可以使用模板语言为每张卡创建一个逐渐增加的ID，使用您的“ for”循环中的i变量：

<%for(var i = 0; i<groups.length; i++){%>
<div class="col-md-4">
  <div class="card rider-card">
    <div class="card-body" id="card_<%=i%>">
      <h4 class="card-title">Text Here</h4>
      <h5 class="card-subtitle mb-2 text-muted">Text Here</h5>
      <h6 class="card-text">___ spots available</h6>
      <p class="card-text">Text Here</p>
      <a onclick="selectDriver(document.getElementById('card_<%=i%>))" class="stretched-link"></a>
    </div>
</div>
</div>
<%}%>

如果您想在其他地方引用该卡，这很有用。或者，您可以通过parenthnodes冒泡并钩住上方的div

      <a onclick="selectDriver(this.parentNode.parentNode))" class="stretched-link"></a>