Как я могу сократить/рефакторинг это в jQuery?


$('#step-holder a').click(function (e) {
    e.preventDefault();
    $('#step-holder div').each(function () {
        if ($(this).attr('class') == 'step-dark-left') {
            $(this).removeClass('step-dark-left');
            $(this).addClass('step-light-left');
        }
        if ($(this).attr('class') == 'step-dark-right') {
            $(this).removeClass('step-dark-right');
            $(this).addClass('step-light-right');
        }
        if ($(this).attr('class') == 'step-no') {
            $(this).removeClass('step-no');
            $(this).addClass('step-no-off');
        }
        if ($(this).attr('class') == 'step-dark-round') {
            $(this).removeClass('step-dark-round');
            $(this).addClass('step-light-round');
        }
    });
    if ($(this).parent().attr('class') == 'step-light-left') $(this).parent().attr('class', 'step-dark-left');
    if ($(this).parent().next().attr('class') == 'step-light-right') $(this).parent().next().attr('class', 'step-dark-right');
    if ($(this).parent().next().attr('class') == 'step-dark-round') $(this).parent().next().attr('class', 'step-light-round');
    if ($(this).parent().next().attr('class') == 'step-light-round') $(this).parent().next().attr('class', 'step-dark-round');
    $(this).parent().prev().attr('class', 'step-no');
});


234
-1
задан 16 июля 2011 в 12:07 Источник Поделиться
Комментарии
1 ответ

Один быстрый рефакторинг прыгает на меня. Начните ваш друг с:

$('#step-holder div').each(function () {
var $this = $(this);

Каждый раз, когда вы называете его (возможно 12 раз?) его выполнение поиска ... вы должны выглядеть, как только этот объект, сохранить результат, и затем повторно использовать его.

Я собираюсь предположить, что каждый из этих объектов имеет только один класс-в противном случае ваш .буква attr ("класс") тест потерпит неудачу (кстати, использовать .hasClass('х') для тестирования, так что если он имеет несколько классов, можно еще сказать, если он имеет , что класс). На основе этого предположения, можно укоротить первых , если заявления, подобные этому:

$('#step-holder div').each(function () {
var $this = $(this);

if( $this.hasClass('step-dark-left') ) {
$this.attr('class','step-left-light');
}
else if( $this.hasClass('step-dark-right') ) {
$this.attr('class','step-light-right');
}
... etc ...
});

Я также предлагаю вам использовать , если ... еще, если ... еще, если ... и т. д. Потому что только один из них может быть правдой-не повод, чтобы оценить их все. Опять же, это предположение на основе вашего кода, и я читаю много на ваш тестовый класс, когда на самом деле может быть ошибкой с вашей стороны.

1
ответ дан 17 июля 2011 в 04:07 Источник Поделиться