在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。我正在使用弹簧

Answer 1

我没有在春季使用百里香。我在jsp页面上使用了jstl。所以，我从我的角度来解释你。首先，你应该为每一个你从javascript/jquery获得访问的元素提供id。

因此，要回答您的疑问：

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> 
   

到FO表的每一个元素分配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); 
    }); 
}); 

我遇到了类似的情况，你正面临着这是我如何解决它。我希望它能帮助你。

不建议动态绑定对象。我所做的是，我给每一行vote_button同一类，然后将这个类应用到每个动态创建的元素。每次单击votebutton时，我们都可以访问按钮的值或以vote_id（名称用下划线和id分隔）生成的按钮的ID。通过分割这个值，我们可以得到我们想要参考的行的id。我们可以通过这个id来访问任何行的值，因为每个<td>的名字是name_id（like votes_1，snackname_1），因为在每一行中，下划线之后的数字将是相同的并且它只是该行的位置。