Question

我有一个元素，最后一个元素，它具有步骤活动类。现在，我想编写一个方法，查找具有此类的元素，然后删除此类并将其添加到上一个类。然后，如果单击一个按钮，我会调用此方法。

我有以下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');
}

我无法让它发挥作用，有人可以告诉我原因并提出任何解决方案吗？

Answer 1

我认为这应该可以解决问题

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

Answer 2

这样的事情可以解决问题：

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

基本上，这会找到当前的step-active元素，删除step-active类，转到上一个.step元素，然后将该类添加到该元素。

您的代码无法正常工作的原因之一是因为您没有将$('.step').find().hasClass('step-active');保存到变量中。 $(this)不是您需要的元素。

Answer 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");
}

查找元素hasClass并修改前一个

3 个答案: