Question

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

因此，当您点击向下箭头时，名为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/

Answer 2

这里使用.click()事件处理程序而不是切换：

$('.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');
    };
});

HTML如下：

<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/

Answer 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/

Answer 4

为我工作

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');
        }
    });
});

Answer 5

就我个人而言，我会使用一个类而不是两个类，因为您知道您正在使用的元素具有默认状态。因此，不要使用.arrow-down类，只需将该背景提供给.updown类并让.arrow-up类使用！重要的是在切换时将其推翻：

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');
    });
});

jQuery .toggle（）+ addClass（）似乎没有预期的效果

5 个答案: