Цикл while в jquery динамического идентификатора и класса

Question

У меня есть несколько div'ов с похожим кодом внутри, но у меня есть уникальный идентификатор внутри основного div, который вызывает функцию toggleClass & slideToggle. Я пытаюсь создать цикл, чтобы мне не приходилось писать похожий код для каждого элемента.

--- рабочий код --- (где числовое значение после идентификатора изменится)

$('#er1').click(function() {
    $('#er1').toggleClass('but-extra-on');
    $('#cr1').toggleClass('but-closerow-on');
    $('#er1').next('div').slideToggle('slow');
    return false;
});

- не рабочий код - (я хочу иметь функции для нажатия # er1, # er2, # er3 и т. Д.)

var count = 1;
while (count < 10){
    var curER = 'er'+count; 
    var curCR = 'cr'+count; 
    $('#'+curER).click(function() {
        $('#'+curER).toggleClass('but-extra-on');
        $('#'+curCR).toggleClass('but-closerow-on');
        $('#'+curER).next('div').slideToggle('slow');
    });
    count++;
}

* по какой-то причине, когда я использую код while, всякий раз, когда я нажимаю # er1, # er2, # er3 и т. Д., Только событие для # er9 переключается.

Answer 1

Вы можете решить эту проблему, используя селектор $ (this) для того, на который вы щелкаете, и прикрепляя атрибут html data к div, указав другой div, который вы хотите изменить, щелкнув по нему, и выбравдругой с этим ... имеет смысл .. вероятно нет?Посмотрите Решение 1 ниже.

Второе решение - использовать Данные события jQuery для передачи переменной count в прослушиватель событий.

Решение 1: http://jsfiddle.net/Es4QW/8/ (это немного раздувает ваш HTML) Решение 2: http://jsfiddle.net/CoryDanielson/Es4QW/23/

Я считаю, что второе решение немного более эффективно, поскольку у вас немного меньше HTML-кода, а объект $ (this) немного меньше.Я считаю, что создание карты и передача ее в виде данных о событии менее интенсивно ... но ... реально ... нет никакой разницы ... the second solution has cleaner HTML code, so you should use that.

Решение 3 с /.slideToggle (): http://jsfiddle.net/CoryDanielson/Es4QW/24/

Редактировать: Обновлены решения путем передачи выбранных элементов вместо селекторов.Теперь каждое событие щелчка не будет выполнять поиск DOM, как это было раньше.

Answer 2

Я сталкивался с этой проблемой раньше. Я исправил это, распаковав код прослушивателя событий в его собственную функцию следующим образом:

for (var i = 1; i < 10; i++) {
    attachClickEvent('er'+i, 'cr'+i);
)

function attachClickEvent(cr, er)
{
    $('#'+er).click(function() {
        $(this).toggleClass('but-extra-on');
        $('#'+cr).toggleClass('but-closerow-on');
        $(this).next('div').slideToggle('slow');
    });
}