在javascript中按下按钮时获取动态元素的值

Question

我正在动态输出包含多个信息的数据块，其中包括一个按钮，当我按下该按钮时，它将为我提供该特定块中的名称。

我的ejs文件

<% data.forEach(el => { %>
    <div class="card">
        <img src= "<%= el.image %>" class="card-img-top" alt="">
        <h5 class="card-title"><%= el.name %></h5>
        <p class="card-text">Age: <%= el.age %></p>
        <p class="card-text"><%= el.club %></p>
        <button class="remove-player">Remove Player</button>
    </div>
<% }) %>

当我按下按钮时，我想获取与该按钮关联的元素名称的值，因为使用jQuery可以得到多个值，即

$('.remove-player').on('click', function() {
    console.log($('.card-title').text());
});

我只想获取与按下的按钮相关的卡标题的值。

Answer 1

使用相对于$(this)的导航。

console.log($(this).siblings(".card-title").text());