JQuery переключение div - как сделать это с несколькими идентификаторами?

Question

Я новичок в Jquery. Моя установка выглядит следующим образом:

У меня есть серия div, которые нужно переключать (показывать скрытыми и показанными). У каждого div есть действие, которое может быть выполнено, поэтому потребуется уникальный идентификатор, чтобы узнать, из какого div произошло событие.

Чтобы переключить div, у меня есть кнопка для каждого div (который не находится в div для переключения).

Прямо сейчас, без jquery, я использую событие onclick кнопки, чтобы передать идентификатор соответствующего div для переключения. Используя уникальный идентификатор, я могу сделать следующее:

function toggleFlag(divId) {
    var div = document.getElementById(divId);
    div.style.display = (div.style.display=="block" ? "none" : "block");
}

divId уникален, поэтому я также знаю, откуда происходит событие, если выполняется действие внутри div.

код привязки выглядит примерно так:

onclick="toggleFlag('id-111');"

где '111' - уникальный идентификатор

Во-первых, стоит ли даже использовать jquery для этого, если размер моего javascsript не намного сложнее (кроме, может быть, простого ajax).

Что еще более важно, как это правильно сделать с помощью jquery?

Обновление: я очень близок к решению этого. Мне удалось заставить его работать, используя одно из предложенных ниже предложений, требующих уникальных имен классов для каждой кнопки. Несколько методов предлагают реализации, где имя класса одинаково для всех кнопок (я хочу это для того, чтобы иметь возможность статически назначать стили для класса кнопки), но я не мог заставить их работать. Может ли кто-нибудь рассказать о решении? Спасибо!

Answer 1

Допустим, вы создаете свои якоря, чтобы иметь идентификатор, который соответствует идентификатору DIV для переключения, и, кроме того, все они имеют общий класс CSS. Например,

<a href="#" id="a_111" class="toggleButton">Toggle</a>
<div id="d_111">Some stuff.</div>

Теперь вы можете использовать jQuery для создания обработчиков кликов для всего этого довольно легко.

$(function() {
    $('a.toggleButton').click( function() {
        var divId = $(this).attr('id').replace(/a_/,'d_');
        $(divId).toggle();
    });
});

Answer 2

Вы можете сделать что-то вроде этого:

HTML:

<button id="btnId1" class="divId1" value="Click me to toggle divId1"/>
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/>
etc...

<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...

SCRIPT:

$(function() {
    $("button").click(function() { 
        var divId = $(this).attr("class");
        $("#" + divId).toggle();
    });
});

Преимущество этого подхода состоит в том, что событие определяется только один раз для всех кнопок. Вы также можете использовать другую стратегию для хранения идентификатора div в информации о кнопке, например, нестандартный атрибут, который jquery может также подхватить, или сделать идентификатор div частью идентификатора кнопки следующим образом:

<button id="btn_divId1" value="Click me to toggle divId1"/>
<div id="divId1">div 1</div>

, а затем извлеките идентификатор div из идентификатора нажатой кнопки (лично я бы выбрал такой подход)

Надеюсь, это поможет

РЕДАКТИРОВАТЬ: Чтобы ответить на первый вопрос, да, вы бы выиграли от этого с jQuery, поскольку это сократило бы объем кода, который вы пишете, и позволило бы вам перейти к ненавязчивому назначению событий для кнопки, что хорошо:)

РЕДАКТИРОВАТЬ 2: Использование нестандартных атрибутов:

HTML:

<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/>
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/>
etc...

<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...

SCRIPT:

$(function() {
    $("button").click(function() { 
        var divId = $(this).attr("divid");
        $("#" + divId).toggle();
    });
});