доступ к текущему элементу в .each () - PullRequest
Новая
       28

доступ к текущему элементу в .each ()

1 голос
/ 16 июля 2011

У меня есть следующий код:

HTML 

<div id="step-holder">
    <div class="step-no">1</div>
    <div class="step-dark-left"><a href="#">Basic details</a></div>
    <div class="step-dark-right">&nbsp;</div>
    <div class="step-no-off">2</div>
    <div class="step-light-left"><a href="#">SEO</a></div>
    <div class="step-light-right">&nbsp;</div>
    <div class="step-no-off">3</div>
    <div class="step-light-left"><a href="#">Preview</a></div>
    <div class="step-light-round">&nbsp;</div>
    <div class="clear"></div>
</div>

Jquery 

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $(this).parent('.step-light-left').each(function () {
        $(this).removeClass('.step-light-left').addClass('.step-dark-left');
    });
});

, но вторая $(this) (внутри .each) по-прежнему относится к исходной $(this). так что не работает.

как этого можно достичь? я не понимаю, почему второй $(this) не относится к текущему элементу .each().

или, может быть, если у вас есть другое решение, измените все step-light-left на step-light-right и наоборот.

что мне нужно сделать, это отключить все «не нажатые» div и включить «нажал» один.

Ответы [ 4 ]

6 голосов
/ 16 июля 2011

Возможно, проблема не в объеме this.

Эта строка неверна:

$(this).removeClass('.step-light-left').addClass('.step-dark-left');

Должно быть:

$(this).removeClass('step-light-left').addClass('step-dark-left');

Без точек. Попробуйте это.

Добавление комментария Криса: вам не нужно использовать .each (), вы можете просто добавить / удалить класс непосредственно в селекторе.

Дополнительные дополнения : Если вы хотите отключить все «не щелкнувшие» div и включить «кликнувший», что делать, если вы определяете один класс с именем «active» или что-то в этом роде. Затем вы просто делаете что-то подобное внутри функции щелчка: 

$('#step-holder .active').removeClass('active');
$(this).parent().addClass('active');
2 голосов
/ 16 июля 2011

решение: 

$('#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');
        }
    });
    $(this).parent().removeClass('step-light-left');
    $(this).parent().addClass('step-dark-left');
});
0 голосов
/ 16 июля 2011

Вы можете сделать то, что вы просите в обновленном вопросе, с помощью одной цепочки методов. 

$('#step-holder a').click(function(e) {
    e.preventDefault();
    $(this).parent()
        .removeClass('step-light-left')
        .addClass('step-dark-left')
        .siblings('.step-dark-left')
        .removeClass('step-dark-left')
        .addClass('step-light-left');
});

демо на http://jsfiddle.net/gaby/zSXnm/3/

0 голосов
/ 16 июля 2011

Родителем «# step-holder a» является div, содержащий тег «a», а не # step-holder div.Я добавил еще один вызов родительской функции: 

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $(this).parent().parent().find('.step-light-left').each(function () {
        $(this).removeClass('step-light-left').addClass('step-dark-left');
    });
});
...