javascript - Slick-Slider 下一个和上一个按钮未激活

Question

我有一个自定义的光滑 slider 库，当您单击库图像时它会被激活。但是上一个和下一个箭头不起作用。当您选择它们​​时，图库将恢复为原始图像。我试过使用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/