рубин переменной в JQuery блоке показать/скрыть

Question

Сейчас этот JQuery работает просто отлично:

:javascript 
    $("#catExpander1").click(function() { 
     $("#category1").toggle("fast", function() { 
     }); 
    }); 

Но, конечно, есть большая проблема: он не может быть повторно использована, чтобы показать/скрыть другие дивы. Как заменить жестко кодированные идентификаторы на переменные?

Для связи:
настоящее время я использую это в приложении рельсы, чтобы показать/скрыть подкатегории под их родительской категории, которые все внутри царгами списка категории навигации. Единственный способ, которым я могу думать о себе, чтобы сделать это создать отдельный блок Jquery для каждой категории и подкатегории, но, конечно, это ужасно подход, поскольку он требует большого количества повторяющихся, не подлежит повторному использованию и т.д.

Answer 1

Если вы хотите быть умными, используйте одну из многих существующих библиотек для сбрасывания. Bootstrap has a good one.

Если вы действительно хотите, чтобы свернуть собственное решение ...

Обычно вы бы связать связанные с DOM узлов вместе с помощью href кнопки (предполагается, что это ссылка), или атрибут data-. Важно, чтобы сам DOM передавал связь между элементами, как для семантической целостности вашего документа, так и потому, что это лучший способ выполнить это с минимальным количеством JavaScript.

Затем вы можете написать общий обработчик кликов, который знает, какой элемент отображать/скрыть, на основе которого был нажат элемент.

Наконец, все ваши расширителя кнопок будет дан класс, как expandable, который вы бы затем использовать, чтобы связать все кнопки с одним $('.expandable').click вызова, или через один on вызов, если они будут динамически добавлен в DOM.

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

<a href="#category1" class="expandable">Expand Category 1!</a> 
<div id="category1"> 
Item 1 
Item 2 
</div> 

И ...

$(".expandable").click(function(e) { 
    e.preventDefault(); 
    $($(this).attr('href')).toggle("fast"); 
}); 

Answer 2

Я предлагаю использовать атрибут HTML данных. Например, для каждого расширителя добавьте атрибут data, который ссылается на идентификатор для расширения.

Предполагая, что расширитель - это изображение.

<img src="..." data-target="category1" class="expander" /> 

Затем в коде

$(".expander").click(function() { 
    $("#" + $(this).data("target")).toggle("fast", function() { 
    }); 
}); 

Answer 3

Вы можете добавить обоюдный класс CSS для всех категорий, например, category и использование событий делегация:

$("#catExpander1").on('click', '.category', function() { 
    $(this).toggle('fast') 
});