javascript - 对不同的 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 的子元素，例如：

<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

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

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/