Javascript 事件委派-具有错误类的事件触发器
我正在尝试用html-vanilla javascript创建一个滑块。我能够打开一个模式,显示一个宽滑块图像和小图像(缩略图)。一切看起来都很好,但当我点击缩略图(有“small_image”类)时,它们会触发事件、更改图像并再次将相同的图像添加到缩略图部分 当我点击任何缩略图时,我用Javascript 事件委派-具有错误类的事件触发器,javascript,event-delegation,Javascript,Event Delegation,我正在尝试用html-vanilla javascript创建一个滑块。我能够打开一个模式,显示一个宽滑块图像和小图像(缩略图)。一切看起来都很好,但当我点击缩略图(有“small_image”类)时,它们会触发事件、更改图像并再次将相同的图像添加到缩略图部分 当我点击任何缩略图时,我用console.log(e.target.className)检查了控制台,它显示的是“slider”类而不是“small\u image”类。。为什么会发生这种情况?我如何解决 Html部分 <div i
console.log(e.target.className)
检查了控制台,它显示的是“slider”类而不是“small\u image”类。。为什么会发生这种情况?我如何解决
Html部分
<div id="photos" class="tabcontent">
<div class="tabslider">
<div>
<img src="{{image_path("posts/5-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/6-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/7-1537128615.jpg")}}" class="slider">
</div>
<div>
<img src="{{image_path("posts/8-1537128615.jpg")}}" class="slider">
</div>
<div id="myModal" class="modal">
<span class="close cursor">×</span>
<div class="modal-content">
<!-- wide image -->
<div class="mySlides">
<img class="show_slider" src="">
</div>
<!-- small images -->
<div class="small_images"></div>
</div>
</div>
</div>
</div>
document.querySelector(".tabslider").addEventListener("click", function (e) {
if (e.target.className = "slider") {
let smallImages = document.querySelector(".small_images"),
images = document.querySelectorAll(".slider"),
slider = document.querySelector(".show_slider"),
sliderDiv = document.querySelector(".mySlides"),
model = document.querySelector("#myModal");
model.style.display = "block";
images.forEach(function (image) {
let img = Elementor.create("img", {"src": image.src, "class": "small_image"}),
div = Elementor.create("div", {"class": "columnlightbox"},);
div.appendChild(img);
smallImages.appendChild(div);
});
slider.setAttribute("src", e.target.src);
sliderDiv.style.display = "block";
}
})
您正在此处设置值,而不是进行比较:D如果将
e.target
替换为e.currentTarget
@daminianczapiewski,请选择slider image。。
e.target.className = "slider"