滑动滑块的下一个和上一个按钮未激活

Question

我有一个自定义的光滑滑块画廊，当您单击画廊图像时，该画廊就会被激活。 但是上一个和下一个箭头不起作用。 选择它们后，图库会恢复为原始图像。 我尝试使用z-index: 100; 但它似乎不起作用。 我是JavaScript的新手，所以我认为它与整个div是可单击的事实有关。

这是JS Fiddle ，它似乎带有箭头，但没有下面插入的代码。

 $(function() { $(".div2").hide(); $(".div1").on("click", function() { $(".div2").hide(); $(".div1").show(); $(this).hide(); $(this).next().show(); }); $(".div2").on("click", function() { $(this).hide(); $(this).prev().show(); }); }); $('.carousel-one').slick({ arrows: true, infinite: true, speed: 500, slidesToShow: 1, centerMode: true, variableWidth: true, autoplay: true, autoplaySpeed: 2000 }); 

 .slick-next { right: 20px; /* background-color: black; */ z-index: 100; } .slick-prev { left: 20px; /* background-color: black; */ z-index: 100; } 

 <link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> <div class="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div> <div class="div2"> <div class="carousel-one"> <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> </div> </div> <div class="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div> <div class="div2"> <div class="carousel-one"> <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> </div> </div> <div class="div1"><img src="http://lorempixel.com/600/200" alt="Image three"></div> <div class="div2"> <div class="carousel-one"> <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> </div> </div> 

Answer 1

按钮单击事件冒泡，并且div2单击处理程序将其捕获。 一种解决方法是，如果单击的元素是按钮，则退出该函数。

这是用javascript做到的一种方法。 我还添加了一些console.log，供您在控制台中检出并进行操作。 去尝试在jQuery中使用类选择器等。

  $(".div2").on("click", function(e) {
    console.log("div2 click event:", event); // js event obj
    console.log("div2 click event:", e); // jQuery event object
    if (event.target.nodeName == "BUTTON") return; // exit if button
    $(this).hide();
    $(this).prev().show();
  });

工作代码： http : //jsfiddle.net/jje5a1dr/5/