时间戳

首页 > 解决方案 > 如何使用 jQuery 脚本定位特定的自定义 html 标签

jquery - 如何使用 jQuery 脚本定位特定的自定义 html 标签

问题描述

我正在尝试使用 jQuery 隐藏某些内容并在表格中显示表单，但现在我隐藏或显示自定义标签上的所有内容。我怎样才能让这个脚本只针对我可以给这些标签的 ID？

$(document).ready(function() {
  $(".hide").click(function() {
    $("p").hide(100);
    $("z").show(100);
  });
  $(".show").click(function() {
    $("p").show(100);
    $("z").hide(100);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered">
  <th>début vacance</th>
  <th>fin vacance</th>
  <th>supprimer vacances</th>
  <tr th:each="vacations : ${selectedUser.getVacations()}">
    <td th:utext="${vacations.getStartVacation()} ">...</td>
    <td th:utext="${vacations.getEndVacation()} + ${vacations.id}">...</td>
    <td>
      <p th:text="${vacation.fistname}">...</p>
      <z th:text="${vacations.id}">...</z>
      <button class="hide">Hide</button>
      <button class="show">Show</button>
    </td>
</table>

标签： jqueryhtmlthymeleaf

解决方案

像这样试试。这将检查最近的父 tr 并在其中找到 p 或 z。如果您也为 p 添加了多个容器，这在任何情况下都不会失败

  <script>
      $(document).ready(function(){
          $(".hide").click(function(){
              $(this).parents('tr').find("p").hide(100);
              $(this).parents('tr').find("z").show(100);
          });
          $(".show").click(function(){
              $(this).parents('tr').find("p").show(100);
              $(this).parents('tr').find("z").hide(100);
          });
      });
  </script>

希望这可以帮助

推荐阅读