对不同的div使用相同的JavaScript代码

Question

这是我的JavaScript代码：

的Javascript

<script> $(document).ready(function(){  
    $("#showButton").click(function(){ $("#showContent").toggle("slow");  
}); }); </script>

问题是如何为不同的<div>

使用相同的代码

比如使用此代码打开<div id=#showContent></div>并使用相同的代码但单独打开<div id=#showContentSecond></div>

我有很多div元素，每次我想操作元素时都不想编写代码。

Answer 1

如果div不是div的子代，则该按钮需要以某种方式与div相关，例如：

<button class="mybutton" data-something="1">One</button>
<button class="mybutton" data-something="2">Two</button>

<div data-something="1">first</div>
<div data-something="2">second</div>

使用Javascript：

$(document).ready(function(){
    $('button.mybutton').click(function(){
        $('div[data-something=' + $(this).data('something') + ']').toggle();
    });
});

小提琴演示：http://jsfiddle.net/vcAtb/

Answer 2

您可以使用document.getElementsByTagName元素获取所有div。

document.getElementsByTagName("div")

Answer 3

将CSS class应用于您希望具有相同行为的每个元素

HTML

<div id="div1" class="toggleDiv"></div>
<div id="div2" class="toggleDiv"></div>
<div id="div3" class="toggleDiv"></div>

的JavaScript

$(document).ready(function(){  
    $(".toggleDiv").click(function()
    { 
        $(this).toggle("slow");  
    });
 });

<强> http://jsfiddle.net/gDG6n/