Как настроить таргетинг на определенный пользовательский тег HTML с помощью скрипта jQuery

Question

Я пытаюсь использовать jQuery, чтобы что-то скрыть и показать форму в таблице, но сейчас я скрываю или показываю все в своем пользовательском теге. Как сделать так, чтобы этот скрипт предназначался только для идентификатора, который я мог бы присвоить этому тегу?

$(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>

Answer 1

Поскольку кнопки и теги p и z являются одноуровневыми, вы можете сделать что-то подобное, чтобы ограничить операции только текущим td:

$(".hide").click(function() {
  $(this).siblings("p").hide(100);
  $(this).siblings("z").show(100);
});

$(".show").click(function() {
  $(this).siblings("p").show(100);
  $(this).siblings("z").hide(100);
});

Answer 2

Попробуй вот так.Это проверит ближайший родительский элемент 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>

Надеюсь, это поможет