javascript - 在 thymeleaf 表中动态创建按钮

Question

我正在使用 thymeleaf 生成一个表，它表示对象(零食)列表。每一种小吃都有一些与之相关的票数。我希望每种小吃都有一个按钮，以便用户可以为其投票，增加显示的投票数，然后在单击提交按钮后更新

    <table class="table table-striped">
    <thead>
      <tr>
        <th>Snacks</th>
        <th>Last Date Purchased</th>
        <th>Votes</th>
        <th>Up Vote</th>
      </tr>
  </thead>
  <tbody>
      <tr th:each="snack,iterStat : ${snacksuggested}">
        <td th:text="${snack.name}"></td>
        <td th:text="${snack.lastPurchaseDate}"></td>
        <td th:text="${snack.votes}"></td>
        <td>
            <button class="btn btn-default" th:id="${'voteBtn_'+(iterStat.count -1)}" th:text="${snack.name} +' Vote'">Up Vote</button>
        </td>
      </tr>
  </tbody>
</table>

1. 如何引用特定零食？
2. 我应该在哪里放置 JavaScript 函数定义？
3. 如何更新点击按钮时显示的票数？

PS。我正在使用 Spring

Answer 1

我没有在 Spring 上使用过thymeleaf。我在jsp页面上使用过jSTL。所以，我从我的 Angular 向你解释一下。首先，您应该为您生成的每个元素提供 id，以便从 Javascript/Jquery 进行访问。

回答您的疑问:

1. 我们将使用class vote_button来引用小吃。 。每个零食都将应用相同的类别。

2. 您可以将 jquery/javascript 函数放置在脚本标记内代码的末尾，以确保 DOM 在 JQuery 启动之前已加载。

3. 您可以向每个包含 id 的按钮添加一个值。 。然后每次点击你都可以得到 id并用它来引用投票计数。

     <tr th:each="snack,iterStat : ${snacksuggested}">
       <td th:text="${snack.name}" id="snackname_${iterStat.count-1}"></td>
       <td th:text="${snack.lastPurchaseDate} id="purchasedate_${iterStat.count-1}"></td>
       <td th:text="${snack.votes} id="votes_${iterStat.count-1}"></td>
       <td>
           <button class="btn btn-default vote_button" value="${'voteBtn_'+(iterStat.count -1)}" th:id="${'voteBtn_'+(iterStat.count -1)}" th:text="${snack.name} +' Vote'">Up Vote</button>
       </td>
     </tr>
   

将 id 分配给表的每个元素后，现在是时候编写 Jquery/Javascript 代码了。我们必须使用一个类来访问不同的投票按钮。

$( document ).ready(function() {
    $(".vote_button").on('click', function() {
          var id = $(this).val();
          var idArray = id.split('_');
          var voteId= idArray[1];
          var currentVal = $("#votes_"+voteId).html();
          $("#votes_"+voteId).html(currentVal+1);
    });
});

我遇到了与您面临的类似情况，这就是我解决它的方法。希望对您有帮助。

不建议动态绑定(bind)对象。我所做的是为每一行提供相同的类 vote_button然后将此类应用于每个动态创建的元素。每次votebutton单击后我们可以访问按钮的值或按钮的 id，生成为 vote_id (名称用下划线分隔，然后是 id)。通过分割这个值我们可以得到id我们想要引用的行。我们可以通过 id 访问该行的任何值作为每个的名称<td>是 name_id (如 votes_1、snackname_1)，因为在每一行中，下划线后面的数字将相同，并且它只是该行的位置。