Найдите элемент hasClass и измените предыдущий

#javascript #jquery

Вопрос:

У меня есть элемент, последний, у которого есть класс step-active. Теперь я хочу написать метод, который ищет элемент, у которого есть этот класс, затем удалите этот класс и добавьте его к предыдущему. Затем я вызываю этот метод, если нажата кнопка.

У меня есть следующий фрагмент HTML-кода:

 <div class="col-lg-6 col-md-6 step-panel" style="padding-right: 0">
    <div class="step container-fluid">
        <p>4</p>
    </div>
    <div class="step">
        <p>3</p>
    </div>
    <div class="step">
        <p>2</p>
    </div>
    <div class="step step-active">
        <p>1</p>
    </div>
</div>

Это мой js:

 function indicateStep() {
        $('.step').find().hasClass('step-active');
        $(this).removeClass('step-active');
        $(this).prev().addClass('step-active');
}

Я не могу заставить его работать, кто-нибудь может сказать мне, почему и предложить какое-либо решение?

1. $('.step-panel').find('.step-active')...

2. Как насчет чего-то подобного var elem = $(".step-panel").find(".step-active"); ?

3. Уже есть несколько ответов о том, как это сделать — причина, по которой то, что у вас не работает, заключается в том, что вы ищете div с class step , а затем просматриваете его дочерние элементы с find помощью for one with class step-active , который, очевидно, не будет найден

Ответ №1:

Я думаю, это должно сработать

 function indicateStep() {
    $('.step.step-active')
    .removeClass('step-active')
    .prev()
    .addClass('step-active');
}

Ответ №2:

Что-то вроде этого должно сработать:

 function indicateStep() {
    $('.step-active').removeClass('step-active')
        .prev('.step').addClass('step-active');
}

По сути, это находит текущий step-active элемент, удаляет step-active класс, переходит к предыдущему .step элементу и добавляет к нему класс.

Одна из причин, по которой ваш код не работал, заключалась в том, что вы не сохраняли $('.step').find().hasClass('step-active'); в переменную. $(this) это не тот элемент, который вам нужен.

1. Большое спасибо, это действительно решило проблему. Я не был уверен, какой из них я должен перехватить, .step-panel или .step.

2. Я использовал $('.step-active') , потому что это именно тот элемент, который вы хотите изменить.

3. Мне интересно, как я могу найти элемент, который имеет определенный класс. Я подумал, что в этом случае будет хорошим решением, если я смогу идентифицировать элемент с классом.

4. Это именно то, что $('.step-active') делает. Он выбирает элемент, который имеет step-active класс as. ( . Там указано, что jQuery ищет элемент со следующей строкой в его классе)

Ответ №3:

Я предполагаю, что вы вызываете indicateStep результат нажатия кнопки.

Проблема заключается в

 $('.step').find().hasClass('step-active');

строка и тот факт, что вы не используете результат попытки ее найти.

Вот подробная версия для ясности:

 function indicateStep() {
    // Find the active step and remember that element
    var step = $(".step.step-active");

    // Remove the class from it
    step.removeClass("step-active");

    // Add it to the previous one instead
    step.prev().addClass("step-active");
}

И однострочная версия:

 function indicateStep() {
    $(".step.step-active").removeClass("step-active").prev().addClass("step-active");
}