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

Моя теория... если я назначу каждой кнопке идентификатор, такой как "кнопка ###", то я могу использовать подстроку, чтобы получить значение после слова "кнопка", что-то вроде:

$(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.