0

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

所以当你点击向下箭头时，名为的divproduct-add-wrapper会向下滑动，向下箭头*变成**向上箭头，反之亦然。

问题是， .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');
        }
    });
});

有任何想法吗？提前致谢。

4

5 回答 5

4

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

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/

于 2013-06-14T17:48:44.033 回答
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/

于 2013-06-14T17:34:13.980 回答
1

这应该工作，使用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/

于 2013-06-14T17:51:38.787 回答
0

对我来说工作得很好

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');
        }
    });
});
于 2013-06-14T17:52:42.767 回答
0

就个人而言，我会使用一个类而不是两个类来解决这个问题，因为您知道您正在使用的元素具有默认状态。因此，不要使用 .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');
    });
});
于 2013-06-14T17:55:02.757 回答