社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

J. Sel • 5 年前 • 1350 次点击  

<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
 
1350 次点击  
文章 [ 3 ]  |  最新文章 5 年前
Cesar Bielich
Reply   •   1 楼
Cesar Bielich    6 年前

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() =显示或隐藏元素

有道理?

ellipsis
Reply   •   2 楼
ellipsis    6 年前

您可以在不同的元素上使用相同的类名,而不是相同的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>
vahdet
Reply   •   3 楼
vahdet    6 年前

如注释中所述分配一个类,并使用 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>