1

所以，我有这个带有一些按钮和内容的代码。单击按钮时，我希望 div 容器隐藏/显示。这是我使用的 HTML 代码的一部分：

<li>
   <input type="button" id="hideshow" class="showhide1" value="hide/show">
   <div id="content" class="showhide1" style="display: none;">Hello World</div>
</li>
<li>
   <input type="button" id="hideshow" class="showhide2" value="hide/show">
   <div id="content" class="showhide2" style="display: none;">Hello World</div>
</li>
And it goes on like maybe a 100 times O.o...

这是我使用的 jQuery：

<script>
    jQuery(document).ready( function() {
         jQuery('#hideshow').live('click', function(event) {        
            jQuery('#content').toggle('hide');
         });
    });
</script>

这种代码有效，但所有按钮隐藏/显示只是第一个内容 div。我认为这是因为我在所有东西中都有相同的 ID。

但是我有不同的类，所以我想知道是否可以采用单击按钮的类，然后显示与按下按钮具有相同类的 div 的内容。可以这样做还是有更好的方法？

4

3 回答 3

1

首先..一如既往，ID应该始终是唯一的...使用类代替..并且live()不推荐使用on

无需更改大部分代码。

<script>
 jQuery(document).ready(function(){
 jQuery('ul').on('click','.showhide1,.showhide2', function(event) {        
     jQuery(this).next().toggle('hide'); //<--using next()
});
});

您也可以使用兄弟姐妹或最近的而不是下一个...

jQuery(this).siblings('.content').toggle('hide'); //<--using siblings()
jQuery(this).closest('.content').toggle('hide'); //<--using closest()

但是您可以将相同的类添加到所有元素并使用类选择器

  jQuery('ul').on('click','.elementsClass', function(event) {        
     jQuery(this).next().toggle('hide');
  });
于 2013-09-16T07:01:12.867 回答
0

jsFiddle 演示

首先，您必须将 ID 更改为类，因为在 HTML 中 ID 是唯一的。

<li>
    <input type="button" class="hideshow showhide1" value="hide/show" />
    <div class="content showhide1" style="display: none;">Hello World</div>
</li>
<li>
    <input type="button" class="hideshow showhide2" value="hide/show" />
    <div class="content showhide2" style="display: none;">Hello World</div>
</li>

然后您可以选择同级的内容 div。

jQuery(document).ready(function(){
    jQuery('.hideshow').on('click', function(event) {        
        jQuery(this).siblings(".content").toggle('hide');
    });
});
  • PS - 请注意，该.live()函数自 jQuery 1.7 起已弃用，并在 jQuery 1.9 中被删除。我正在使用.on()。
于 2013-09-16T06:59:33.197 回答
0 
<li>
<input type="button" id="hideshow" class="showhide" value="hide/show">
<div id="content" style="display: none;">Hello World</div>
</li>
<li>
<input type="button" id="hideshow" class="showhide" value="hide/show">
<div id="content" style="display: none;">Hello World</div>
</li>

这是您应该使用的 jQuery：

<script>
    jQuery(document).ready(function(){
    jQuery('.showhide').on('click', function(event) {        
         $(this).next().toggle();
    });
    });
</script>
于 2013-09-16T07:10:33.870 回答