Javascript 仅当第一个滑块处于活动状态时才使按钮处于活动状态-滑动滑块
只有在第一张幻灯片处于活动状态时,我才需要一个按钮处于活动状态。我尝试了这段代码,但它不能正常工作-按钮总是被禁用。怎么了Javascript 仅当第一个滑块处于活动状态时才使按钮处于活动状态-滑动滑块,javascript,html,slider,swiper,Javascript,Html,Slider,Swiper,只有在第一张幻灯片处于活动状态时,我才需要一个按钮处于活动状态。我尝试了这段代码,但它不能正常工作-按钮总是被禁用。怎么了 if ($("#aslide").attr("swiper-slide-active")) { // } else { $("#acceptbtn").attr("disabled", "disabled"); } 单向: 使用Swiper APIeven
if ($("#aslide").attr("swiper-slide-active")) {
//
} else {
$("#acceptbtn").attr("disabled", "disabled");
}
单向:
使用Swiper APIeventslideChange
(当前活动幻灯片更改时将触发事件)-和-
禁用
按钮相关Q:
var swiper=新的swiper(“.swiper容器”{
导航:{
nextEl:“.swiper按钮下一步”,
prevEl:“.swiper按钮prev”,
},
滚动条:{
el:“.swiper滚动条”,
真的,
}
});
let button=document.getElementById(“按钮”)
/*游泳项目*/
swiper.on(“slideChange”,function()){
log(“幻灯片已更改-当前幻灯片为:”+this.realIndex)
如果(this.realIndex==0){
log(“第一张幻灯片做点什么”)
button.disabled=false;
}
否则{
日志(“不是第一张幻灯片做一些事情”)
button.disabled=true;
}
});代码>
html,
身体{
位置:相对位置;
身高:100%;
}
身体{
背景:#eee;
字体大小:14px;
颜色:#000;
保证金:0;
填充:0;
}
.swiper容器{
宽度:100%;
身高:100%;
}
.滑梯{
文本对齐:居中;
字号:18px;
背景:#fff;
/*将幻灯片文本垂直居中*/
显示器:flex;
证明内容:中心;
对齐项目:居中;
}
按钮
幻灯片1
幻灯片2
幻灯片3
测试
当我尝试禁用或启用按钮时,似乎对我有效。可能是代码中其他地方的错误。谢谢!我以前试过,但没有成功。意识到我有一个旧版本的Swiper。现在它工作了!
/* swiper events */
swiper.on("slideChange", function() {
console.log("slide changed - current slide is: " + this.realIndex )
if(this.realIndex == 0){
console.log("first slide do something")
}
else{
console.log("not first slide do somehing")
}
});
$('#btn_asd2231').attr('disabled', true);