Question

今天我使用Spring，Thymeleaf，Html和JavaScript来解决一个非常特殊的问题。我有来自我的Java后端的多个数据集，对于每个数据集，我必须创建一个<div />并将数据绑定到隐藏的div：

<div class="container page-small" th:each="line: ${LINES}">
    <div id="line_data_titles" hidden="true" th:attr="data-txt=${line.titles}"></div>
    ...
</div>

使用此功能意味着我的<div>标识为line_data_titles X次jQuery次。没有办法解决这个问题。至少没有什么东西可以解决这个问题。所以对我的问题：

如果我现在使用<div class="container page-small" th:each="line: ${LINES}"> <div id="line_data_titles" hidden="true" th:attr="data-txt=${line.titles}"></div> ... <script> var titles = $("#line_data_titles").data("txt"); </script> </div>从我的div获取数据：

JavaScript

是否可以使<div>代码仅在定义它的jQuery内有效，以便<div>只读取line_data_titles中带有id的值来自div中定义的<div class="container page-small"> <div id="line_data_titles" hidden="true" data-txt="titles of line 0"></div> ... <script> var titles = $("#line_data_titles").data("txt"); </script> </div> <div class="container page-small"> <div id="line_data_titles" hidden="true" data-txt="titles of line 1"></div> ... <script> var titles = $("#line_data_titles").data("txt"); </script> </div> <div class="container page-small"> <div id="line_data_titles" hidden="true" data-txt="titles of line 2"></div> ... <script> var titles = $("#line_data_titles").data("txt"); </script> </div> ....？我希望你明白我的意思。它看起来像这样：

jQuery

所以我希望JavaScript只选择定义if (Input.GetAxis ("Up") > 0) { if (movingDown == false) { posY += speed * Time.deltaTime; movingUp = true; } } else { movingUp = false; }的div的id。这可能吗？

Answer 1

是否可以使JavaScript代码仅在内部有效在哪里定义，以便jQuery只读取值来自div内的id line_data_titles 定义

这是不可能的，你必须为每个元素分配一个不同的id - 它们必须是唯一的。如果您有多个具有相同ID的元素，则您的HTML无效。

类似于“Rejith R Krishnan”所说的，你的问题很可能通过动态ID来解决，这有点像：

<div class="container page-small" th:each="line: ${LINES}">
    <div id="line_data_titles_${lines.id}" hidden="true" th:attr="data-txt=${line.titles}"></div> 
    ...
    <script>
        var titles = $("#line_data_titles_${lines.id}").data("txt");
    </script>
</div>

或者，你可以使用类，类似于：

<div class="container page-small">
  <div class="line_data_titles" hidden="true" data-txt="titles of line 0"></div>
    ...
</div> 

<div class="container page-small">
  <div class="line_data_titles" hidden="true" data-txt="titles of line 1"></div>
    ...
</div>

<script>
  $(".line_data_titles").each(function () {
    var titles = $(this).data("txt");
  })
</script>

我希望有所帮助！

Answer 2

使用ids的类名intead

<div class="container page-small">
    <div class="line_data_titles" hidden="true" data-txt="titles of line 0"></div>
</div> 
<div class="container page-small">
    <div class="line_data_titles" hidden="true" data-txt="titles of line 1"></div>
</div> 
<div class="container page-small">
    <div class="line_data_titles" hidden="true" data-txt="titles of line 2"></div>
</div>

和jQuery代码将是

<script>
    var titles = $(".line_data_titles").data("txt"); // for all elements
    var title_1 = $(".line_data_titles")[0].data("txt"); // for the first element
</script>

等...

使用Id进行多个div并使用jQuery

2 个答案: