jQuery的多個顯示/隱藏按鈕

Question

我正在嘗試將許多JavaScript轉換為jQuery，我有一個任務，我相信它有一個簡單的jQuery快捷方式，但我不知道它是什么，而且我無法找到示例。

我的頁面上有很多切換的div。 它們采用以下形式，其中###是每對的唯一整數。

<button class='togglebutton' onclick="toggle('div###');">+</button>
<div id='div###'>...some text...</div>

我認為快捷方式是這樣的：

$('.togglebutton').onclick(function() {
    var divid = '#div'+?????;
    $(divid).toggle();
});

我的理論...如果給每個按鈕一個ID，例如“ button ###”，那么我可以使用子字符串來獲取單詞“ button”之后的值，例如：

$(this).id().substring(6,3);

顯然，這沒有用。 所以，我想我應該問一下jQuery中是否有一個簡單的快捷方式來將一個showhide按鈕與一個單獨的div配對。

Answer 1

無論您的div位於http://jsfiddle.net/tg5op333/25/，您都可能希望這樣做
HTML

    <button class='togglebutton' data-id="1">+</button>
    <div id='1' style="display:none">...some text...</div>
    <button class='togglebutton' data-id="2">+</button>
    <div id='2' style="display:none">...some text...</div>
    <button class='togglebutton' data-id="3">+</button>
    <div id='3' style="display:none">...some text...</div>
    <button class='togglebutton' data-id="4">+</button>
    <div id='4' style="display:none">...some text...</div>

JS：

  $('.togglebutton').click(function() {
        $("#"+ $(this).data('id')).toggle();
    });

Answer 2

如果按照問題中顯示的順序排列HTML，請使用：

$('.togglebutton').click(function() {
    $(this).next().toggle();
});

 $('.togglebutton').click(function() { $(this).next().toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class='togglebutton'>+</button> <div id='div1'>...some text...</div> <button class='togglebutton'>+</button> <div id='div2'>...some text...</div> <button class='togglebutton'>+</button> <div id='div3'>...some text...</div> 

Answer 3

兩種方式：

1）您可以對所有潛水使用一些通用的類別屬性，並使用所有屬性進行選擇。

要么

2）否則，您可以使用此通配符選擇器：

$("[id^=div]")

它為您提供了所有以div開頭的div。