如何解决为什么 .swiper-button-prev 和 .swiper-button-next 不起作用? JavaScript 是同步的
js 小提琴:https://jsfiddle.net/rfbvL4gj/7/
我有一个带有图像的滑块。当我点击其中一张图片时,所有内容都被隐藏,并显示 .layer 元素和具有相同图片的第二个大型滑块。
但有一个问题:当我点击大尺寸滑块的 .swiper-button-next 和 .swiper-button-prev 时,什么也没有发生。我不知道怎么了。
JS:
let album_images_slider = new Swiper("#album_images_slider",{
direction: "horizontal",slidesPerView: 1,loop: true,allowTouchMove: false,speed: 600,autoplay: {
delay: 3000
},navigation: {
nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"
}
});
let album_images_slider_scale = new Swiper("#album_images_slider_scale",prevEl: ".swiper-button-prev"
}
});
$("#album_images_slider").click(function(e) {
if (e.target.nodeName == "IMG") {
$("body *").hide();
$("body").prepend(`<div class="layer"></div>`);
$(".layer").append(`
<div class="swiper-container" id="album_images_slider_scale">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
`);
}
});
$("body").on("click",".layer",function(event) {
let target = event.target;
if (!($(".swiper-container").has(target).length || $(target).hasClass("swiper-container"))) {
$(".layer").remove();
$("body *").show();
}
if ($(target).hasClass("swiper-button-next")) {
console.log("next");
}
else if ($(target).hasClass("swiper-button-prev")) {
console.log("prev");
}
});
解决方法
JavaScript 是同步的
如果您想插入指定的内容(在您的情况下为 Swiper HTML)而不是“做某事”与此内容相关的顺序应该是:
- Jquery append()
- 在附加 DOM 节点上“做某事”(在您的情况下为“滑动条滑块”)。
不工作:
$("b").css("background-color","yellow");
$("p").append(" <b>Appended text</b>.");
工作:
$("p").append(" <b>Appended text</b>.");
$("b").css("background-color","yellow");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>Broken code example.</p>
<script>
$("p").append(" <b>Appended text</b>.");
$("b").css("background-color","yellow");
</script>
就您而言,顺序是 2
然后是 1
。
相关: jQuery function after .append
Hello world 示例
$(".layer").append(`
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
`);
var swiper = new Swiper('.swiper-container',{
navigation: {
nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="layer"></div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。