我正在使用以下Jquery尝试在某个幻灯片编号上添加一个类(使用Royalslider)。以下代码适用于单个幻灯片编号,但您会注意到我也试图在一系列数字上实现相同的效果 - 例如,在幻灯片5-9之间。但这不起作用,只触发数组中的第一个数字。
任何帮助表示赞赏!
JS
// Track slide number and add class
this.rsInstance().ev.on('rsAfterSlideChange', function() {
if( this.currSlideId === 1) {
$('.what').addClass('current');
}
else {
$('.what').removeClass('current');
}
if( this.currSlideId === 2) {
$('.why').addClass('current');
}
else {
$('.why').removeClass('current');
}
if( this.currSlideId === ( 5 || 6 || 7 || 8 || 9 )) {
$('.accolades').addClass('current');
}
else {
$('.accolades').removeClass('current');
}
});
答案 0 :(得分:4)
为什么不简单?
if (this.currSlideId >= 5 && this.currSlideId <= 9) {
$('.accolades').addClass('current');
} else {
$('.accolades').removeClass('current');
}
但是,如果要使用数组,然后使用indexOf()
,它将返回在数组中可以找到给定元素的第一个索引,如果不存在则返回-1。
if ([5,6,7,8,9].indexOf(this.currSlideId) > -1) {
$('.accolades').addClass('current');
} else {
$('.accolades').removeClass('current');
}
上述功能适用于IE9 +,对于较旧的浏览器,您可以使用PolyFill或jQuery.inArray(value, array)
if (jQuery.inArray(this.currSlideId,[5,6,7,8,9]) > -1){
$('.accolades').addClass('current');
} else {
$('.accolades').removeClass('current');
}
您可以使用toggleClass()
方法
$('.accolades').toggleClass('current', this.currSlideId >= 5 && this.currSlideId <= 9);
完整
// Track slide number and add class
this.rsInstance().ev.on('rsAfterSlideChange', function() {
$('.what').toggleClass('current', this.currSlideId === 1);
$('.why').toggleClass('current', this.currSlideId);
$('.accolades').toggleClass('current', this.currSlideId >= 5 && this.currSlideId <= 9);
});