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

jQuery .toggle() + addClass() doesn't seem to have desired effect

本文关键字：toggle addClass jQuery      更新时间：2023-09-26

我试图创建一个链接<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');
        }
    });
});

任何想法?

classname永远不会是'up arrow down'，你可能是指'updown arrow down'。

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/

这里使用的是.click()事件处理程序而不是toggle:

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


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

工作演示:http://jsfiddle.net/9wxfJ/3/

应该可以，使用hasClass:

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

小提琴:http://jsfiddle.net/RP294/

就我个人而言，我会使用一个类而不是两个，因为您知道正在处理的元素具有默认状态。因此，不使用。arrow-down类，而是将背景设置为。updown类，并让。arrow-up类使用!important来在切换时否决它:

HTML 

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

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

这也将大大缩短你的javascript代码:

$('body').on('click', '.updown', function(e){
    var arrow = $(this);
    $('#product-add-wrapper').toggle('slow', function() {
      arrow.toggleClass('arrow-up');
    });
});

我很好

http://jsfiddle.net/Hzmxc/

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