javascript - jQuery 切换仅适用于第一个 div

Question

我正在试用 jQuery，但遇到了一些问题。

<script>
        $(document).ready(function(){
          $("#hide").click(function(){
            $("#comm").slideToggle("fast");
            return false;
          });
        });
</script>
<div id="com">
 <button id="hide">Hide/show</button>
  <div id="comm">
    Data here         
  </div>
</div>

我有多个包含#comm div 的#com div。但只有第一个按钮有效。当我有一个显示/隐藏实现时，第一个按钮将控制页面上的所有 comm div。

目前，仍然只有第一个按钮有效，它只控制第一个 div 而不是所有。

Answer 1

Ids 应该是唯一，你最好使用Class Selector (“.class”) .使用 next()使用类 comm

获取当前事件源对象的下一个同级对象

Live Demo

$(document).ready(function(){
      $(".hide").click(function(){
        $(this).next(".comm").slideToggle("fast");
        return false;
      });
});

next(): Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector, jQuery Docs.

如果您没有更改 html 的选项，那么您可以使用 Attribute Equals Selector [name="value"]绑定(bind)事件，但这是最后一个选项，不推荐的方式。

Live Demo

$(document).ready(function(){
      $("[id=hide]").click(function(){
        $(this).next("#comm").slideToggle("fast");
        return false;
      });
});