jquery 个 show/hide 个按钮

Question

我正在尝试将很多 JavaScript 转换为 jQuery，我有一个任务，我认为有一个简单的 jQuery 快捷方式，但我不知道它是什么是，但我找不到示例。

我有一个页面有很多切换 divs。它们采用以下形式，其中 ### 是每对的唯一整数。

<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 中是否有一个简单的快捷方式来将显示隐藏按钮与单独的 div.

配对

Answer 1

如果 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 2

两种方式：

1) 您可以对所有 div 和 select 使用一些通用的 class 属性。

或者

2) 或者你可以使用这个通配符 select 或者 :

$("[id^=div]")

它给你所有的 divid 以 div 开头的。

Answer 3

无论您的 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();
    });

jquery 个 show/hide 个按钮

jquery multiple show/hide buttons

javascript

jquery

show-hide