Javascript 隐藏/显示相关元素

所以，我有一些按钮和内容的代码。单击按钮时，我希望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...

你好，世界


你好，世界

而且可能会持续100次O.O。。。

下面是我使用的jQuery：

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

jQuery（文档）.ready（函数（）{
jQuery（'#hideshow'）.live（'click'，函数（事件）{
jQuery（'#content'）。切换（'hide'）；
});
});

这段代码可以工作，但是所有的按钮隐藏/显示只是第一个内容分区。我想这是因为我在所有内容中都有相同的ID

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

首先，您必须将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>

• 注意，该函数自jQuery1.7以来就被弃用，并在jQuery1.9中被删除。我用的是

首先，您必须将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>

• 注意，该函数自jQuery1.7以来就被弃用，并在jQuery1.9中被删除。我用的是

---

首先。。一如既往，ID应始终是唯一的。。。改用class。。而且

live（）

不推荐使用
无需更改大部分代码

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

---

首先。。一如既往，ID应始终是唯一的。。。改用class。。而且

live（）

不推荐使用
无需更改大部分代码

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

你好，世界


你好，世界

下面是您应该使用的jQuery：

<script>
    jQuery(document).ready(function(){
    jQuery('.showhide').on('click', function(event) {        
         $(this).next().toggle();
    });
    });
</script>

jQuery（文档）.ready（函数（）{
jQuery（'.showhide'）。在（'click'，函数（事件）{
$（this.next（）.toggle（）；
});
});

你好，世界


你好，世界

下面是您应该使用的jQuery：

<script>
    jQuery(document).ready(function(){
    jQuery('.showhide').on('click', function(event) {        
         $(this).next().toggle();
    });
    });
</script>

jQuery（文档）.ready（函数（）{
jQuery（'.showhide'）。在（'click'，函数（事件）{
$（this.next（）.toggle（）；
});
});

天哪，我对这件事很不了解。这个解决方案有效。谢谢大家。你们真是太棒了奥凯，我会的。：）我的答案也很好。。。事实上，它会比this@Patel我不在乎，但它到底有多好呢？天哪，我对这件事一无所知。这个解决方案有效。谢谢大家。你们真是太棒了奥凯，我会的。：）我的答案也很好。。。事实上，它会比this@Patel我不在乎，但它到底有多好？

<script>
    jQuery(document).ready(function(){
    jQuery('.showhide').on('click', function(event) {        
         $(this).next().toggle();
    });
    });
</script>