我正在尝试使用动态按钮将 id 发送到控制器，但它不起作用

Question

我正在尝试使用按钮将对象的 id 发送到控制器。但它只对列表第一行中的项目执行此操作。该按钮不适用于列表中的其他项目。我该如何解决这个问题？

$(document).ready(function () {
  $("#showTweet").click(function () {
    var tweetId = $(this).parent().attr("id");
    $.ajax({
      type: "GET",
      dataType: "json",
      url: "http://localhost:8020/showTweet?tweetId=" + tweetId,
      success: function (result) {
        var description = result.description;
        $("#tweetText").text(description);
      },
    });
  });
});

    

<table id="myTable" class="table table-striped">
  <thead>
    <tr>
      <th>Kullanıcı</th>
      <th>Oluşturulma Tarihi</th>
      <th>Seçenekler</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="unapprovedTweets: ${unapprovedTweets}">
      <td th:text="${unapprovedTweets.creative}"></td>
      <td th:text="${unapprovedTweets.create_date}"></td>
      <td>
        <div th:id="${unapprovedTweets.id}" style="width: 0px; height: 0px; display: contents;">
          <a id="showTweet" class="btn btn-warning">Tweeti Gör</a>
        </div> <a th:href="@{'/sendTweet/' + ${unapprovedTweets.id}}" class="btn btn-primary" style="width: 90px; margin-left: 5px;">Onayla</a>
        <a th:href="@{'/refuseTweet/' + ${unapprovedTweets.id}}" class="btn btn-danger" style="width: 90px; margin-left: 5px;">Reddet</a>
      </td>
    </tr>
  </tbody>
  </table>

Answer 1

您可以通过th:attr 使用data-... 属性来跟踪id：

替换：

<div th:id="${unapprovedTweets.id}"
     style="width: 0px; height: 0px; display: contents;">

与：

<div th:attr="data-tweetId=${unapprovedTweets.id}" 
     style="width: 0px; height: 0px; display: contents;">

在您的 JavaScript 中，使用：

$(document).ready(function(){       
            $("#showTweet").click(function(){
         var tweetId = $(this).parent().attr('data-tweetId');
        $.ajax({
        
        type: "GET",
        dataType: "json",
        url: "http://localhost:8020/showTweet?tweetId="+tweetId,
        success: function(result){
            var description = result.description;
            $('#tweetText').text(description);
            
             }
        });
    });