Question

我正在使用百里香叶生成一个表，它代表一个对象列表（Snacks）。每个小吃都有一些与之相关的投票。我希望每个零食都有一个按钮，以便用户可以投票，增加显示的投票数，然后点击提交按钮后更新

== Physical Plan ==
*SortMergeJoin [key2#297L], [idx#360L], Inner
:- *Sort [key2#297L ASC NULLS FIRST], false, 0
:  +- Exchange hashpartitioning(key2#297L, 200)
:     +- *SortMergeJoin [idx#290L], [key1#296L], Inner
:        :- *Sort [idx#290L ASC NULLS FIRST], false, 0
:        :  +- Exchange hashpartitioning(idx#290L, 200)
:        :     +- *Filter isnotnull(idx#290L)
:        :        +- Scan ExistingRDD[idx#290L,val#291]
:        +- *Sort [key1#296L ASC NULLS FIRST], false, 0
:           +- Exchange hashpartitioning(key1#296L, 200)
:              +- *Filter (isnotnull(key2#297L) && isnotnull(key1#296L))
:                 +- Scan ExistingRDD[key1#296L,key2#297L,val#298L]
+- *Sort [idx#360L ASC NULLS FIRST], false, 0
   +- Exchange hashpartitioning(idx#360L, 200)
      +- *Filter isnotnull(idx#360L)
         +- Scan ExistingRDD[idx#360L,val#361]

如何参考特定小吃？
我在哪里放置javascript函数定义？
如何更新按钮点击时显示的投票次数？

PS。我正在使用Spring

Answer 1

我没有在Spring上使用 thymeleaf 。我在jsp页面上使用过jstl。所以，我从我的角度解释你。首先，您应该为从Javascript / Jquery生成的每个元素提供id。

所以回答你的疑问：

我们将使用class vote_button来引用零食。每个小吃都适用同一类。
您可以将jquery / javascript函数放在代码末尾的脚本标记内，以确保在JQuery启动之前已加载DOM。

您可以为包含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);
    });
});

我遇到了一个你面临的类似场景，这就是我解决它的方式。我希望它可以帮助你。

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

在百里香叶表中动态创建按钮

1 个答案: