javascript - 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();
    });