javascript - jQuery .toggle() + addClass() 似乎没有达到预期的效果

Question

我正在尝试创建一个链接 <a>有两种不同的背景，一种是“向下箭头”，另一种是“向上箭头”，具体取决于类名 arrow-up和 arrow-down .

因此，当您单击向下箭头 时，名为product-add-wrapper 的div向下滑动，向下箭头*变为**向上箭头，反之亦然。

问题是，.toggle + 回调似乎工作正常，它添加了所需的类名并删除了所需的类名，但是，背景图像没有改变(向下箭头没有变成向上箭头)。

这是 html。

<span class="arrow-right">
    <a class="updown arrow-down">&nbsp;</a>
</span>

这是CSS。

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
}

.arrow-down {
    background-image: url('../img/arrow-down.png');
}

这是 javascript。

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        var classname = $('.updown').attr('class');
        if (classname === 'up arrow-down') {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

有什么想法吗？提前致谢。

Answer 1

类名永远不会是“向上箭头-向下”，您的意思可能是“向上箭头-向下”。

if (classname === 'up arrow-down') {

这样重写可能会更好:

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        if ($('.updown').hasClass('arrow-down')) {
            $('.updown').removeClass('arrow-down').addClass('arrow-up');
        } else {
            $('.updown').removeClass('arrow-up').addClass('arrow-down');
        }
    });
});

或者更好的是:Js:

$('.updown').click(function() {
    $('#product-add-wrapper').toggle('slow', function() {
        $('.updown').toggleClass('arrow-up');
    });
});

CSS:

.updown {
    display: block;
    margin-top: -1px;
    height: 25px;
    width: 25px;
    background-image: url('../img/arrow-down.png');
    color:green;
}

.arrow-up {
    background-image: url('../img/arrow-up.png');
    color:red;
}

HTML:

<span class="arrow-right">
    <a class="updown">&nbsp;aa</a>
</span>
<div id="product-add-wrapper">
    aa
</div>

Jsfiddle:http://jsfiddle.net/kingmotley/K7274/1/