我正在尝试创建一个链接 <a>
有两种不同的背景,一种是“向下箭头”,另一种是“向上箭头”,具体取决于类名 arrow-up
和 arrow-down
.
因此,当您单击向下箭头 时,名为product-add-wrapper
的div向下滑动,向下箭头*变为**向上箭头,反之亦然。
问题是,.toggle + 回调似乎工作正常,它添加了所需的类名并删除了所需的类名,但是,背景图像没有改变(向下箭头没有变成向上箭头)。
这是 html。
<span class="arrow-right">
<a class="updown arrow-down"> </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');
}
});
});
有什么想法吗?提前致谢。
最佳答案
类名永远不会是“向上箭头-向下”,您的意思可能是“向上箭头-向下”。
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"> aa</a>
</span>
<div id="product-add-wrapper">
aa
</div>
关于javascript - jQuery .toggle() + addClass() 似乎没有达到预期的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17114113/