时间戳

首页 > 解决方案 > 如何使用 Jquery 隐藏/显示表格中列出的按钮之一？

javascript - 如何使用 Jquery 隐藏/显示表格中列出的按钮之一？

问题描述

<html>
<head>
<script>
$( "#test1" ).click(function() {
    $(this).next("#test2").slideToggle( "slow", function() {
    // Animation complete.
    });
});
</script>
</head>
<body>

<table>
  <tr>
    <th>Actions</th>
  </tr>
  <tr>
    <td>
      <input type="submit" name="test1" id="test1" value="TEST1" /> 
      <br/>
      <input style="display: none;" type="submit" name="test2" id="test2" value="TEST2" /><br/>
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit" name="test1" id="test1" value="TEST1" /><br/>
      <input style="display: none;" type="submit" name="test2" id="test2" value="TEST2" /><br/>
    </td>
  </tr>
</table>

</body>
</html>

嗨，我想在单击表中的 test1 按钮后显示或隐藏 test2 按钮（在选定的行中）。但是有一个问题是有几个按钮具有相同的id。是否可以显示或隐藏选定的按钮？你能帮助我吗？先感谢您！

标签： javascriptjqueryhtml

解决方案

您可以在不同的元素上使用相同的类名而不是相同的 id

$(".test1").click(function() {
  $(this).siblings(".test2").slideToggle("slow", function() {
    // Animation complete.
    $(".test2").show()
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <table>
    <tr>
      <th>Actions</th>
    </tr>
    <tr>
      <td>
        <input type="submit" name="test1" class="test1" value="TEST1" /><br/>
        <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /><br/>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="test1" class="test1" value="TEST1" /><br/>
        <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /><br/>
      </td>
    </tr>
  </table>
</body>

</html>

推荐阅读