使用javascript在按下按钮时传递HTML文本

Question

我有一个rails应用程序，为每个数据库记录创建一个标准化的卡片盒。它在每个框中创建一个按钮，因此有相同按钮类的多个按钮。我想传递文本卡片框来发送AJAX请求。所以每个盒子都有一个不同的变量要发送。目前，当我单击任何按钮时，它只传递card-text数组中的最后一个元素。我将包含一个屏幕截图来显示我正在谈论的内容。下面是处理按钮单击的JavaScript代码片段。

let track = document.getElementsByClassName('btn btn-sm btn-outline-dark');
let getPackages = document.getElementsByClassName('card-text');
let tNumber = "";
for(let i=0; i<track.length; i++){
    track[i].addEventListener('click', function(){
        for (let j=0; j<getPackages.length; j++){
            console.log(i);
            console.log(j);
            if (i == j){
                console.log(tNumber = getPackages[j].innerText);
                tNumber = getPackages[j].innerText;
                console.log(tNumber); 
                sendRequest(tNumber);
            }
        } 

    });
}

​

​

整个卡片html：

 <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <svg class="bg-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="placeholder: Thumbnail">
            <title>Package</title>
            <rect width="100%" height="100%" fill="#55595c"></rect>
            <image href="https://volumeintegration.com/wp-content/uploads/PackageIcon.png" width="100%" height="225"/>
          </svg>
          <div class="card-body">
            <p class="card-text">
              <%= package.tracking %>
            </p>
            <div class="d-flex justify-content-between alight-items-center">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-dark" id="trackButton">Track</button>
                <%= link_to 'Delete', package, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-sm btn-danger btn-outline-dark"%>
              </div>
            </div>
          </div>
        </div>
</div>

Answer 1

我弄清楚了，我使用了.closest()方法，然后获得了孩子

let track = document.getElementsByClassName('btn btn-sm btn-outline-dark');
let tNumber = "";
for(let i=0; i<track.length; i++){
    track[i].addEventListener('click', function(){
           let parent = track[i].closest('.card-body');
           tNumber = parent.getElementsByClassName('card-text')[0].innerText;
           console.log(tNumber);
           sendRequest(tNumber);  
    });
}