如何使用Jquery隐藏/显示表中列出的按钮之一?

J. Sel • 4 年前 • 587 次点击

<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。是否可以显示或隐藏选定的按钮?你能帮助我吗?提前谢谢你!

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/52850

587 次点击

文章 [ 3 ] | 最新文章 4 年前

• 1 楼

Cesar Bielich 5 年前

ID不应该在页面上重复,它们应该始终是唯一的。如果需要重复引用/元素,则将其用作类。

所以当有人点击一个有类的按钮(或任何东西)时,你可以将其引用为 $(this)

例子:

<td> <-- this is .parent()
    <input type="submit" name="test1" class="test1" value="TEST1" /> <-- This is $(this) when clicked
    <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" /> <-- this is .find('.test2')
</td>

$(document).on('click','.test1', function() {
    $(this).parent().find('.test2').show(); <-- or hide()
})

不需要 <br> 在第一个和第二个按钮之间,因为第二个按钮已经隐藏。

把它分解

$(本) = <input type="submit" name="test1" class="test1" value="TEST1" />

.parent() =您的第一个 <td> 在上面

.find('.test2') = <input style="display: none;" type="submit" name="test2" class="test2" value="TEST2" />

.show() or .hide() =显示或隐藏元素

有道理?

• 2 楼

ellipsis 5 年前

您可以在不同的元素上使用相同的类名,而不是相同的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>

• 3 楼

vahdet 5 年前

如注释中所述分配一个类,并使用 siblings('.someclassname') 选择同级部分。检查代码,如下所示:

$(".buttontype1").click(function() {

  $(this).siblings(".buttontype2").slideToggle("slow", function() {
    // Animation complete.
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <script>
  </script>
</head>

<body>

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

</body>

</html>

登录后回复