为什么 show() 方法在 jQuery 中不起作用？

Question

我正在尝试使用只有 3 张图片的 jQuery 代码创建一个非常简单的幻灯片。

我使用next() 方法显示下一张图片。这是它应该如何工作的： 当您单击链接 (class="next") 时，会调用一个方法，该方法隐藏当前图像并显示下一个图像，并将 1 加到计数器 (i) 上，除非是第三张图像。然后，它隐藏当前图像并显示第一张图像（id="first"）。

点击第一张或第二张图片可以正常工作，但点击第三张图片时，它只是隐藏了当前图片，但不显示第一张图片。

var a = new Array();
$("#slideShow").children().first().show();
$("#slideShow").children().first().next().hide();
$("#slideShow").children("div").last().hide();
var i = 0

$(".next").click(function() {
  if (i == 2) {
    $(this).parent().hide();
    $("#first").show();
    i = 0;
  } else {
    $(this).hide();
    $(this).siblings().hide();
    $(this).parent().next().show();
    i++;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
  <div id="first">
    <img src="https://i.stack.imgur.com/XZ4V5.jpg">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>
  <div>
    <img src="https://i.stack.imgur.com/7bI1Y.jpg">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>
  <div>
    <img src="https://i.stack.imgur.com/lxthA.jpg">
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>
</div>

这些是我尝试过的一些方法：

1. 在 jQuery 中使用 css({"display":"block"}) 代替 show()
2. 使用 Javascript 语法而不是 jQuery：document.getElementById("first").show();
3. 遍历而不是使用id：$(this).parent().parent().show;

但是这些都不起作用。

Answer 1

您的逻辑不太正确，因为您隐藏了幻灯片 div 的内容，然后尝试在幻灯片 div 上调用show()，而不是其内容。

更好的方法是使用一个类来跟踪活动幻灯片并移动到next() 按钮点击：

let $slides = $('#slideShow > div');

$(".next").click(function() {
  let $current = $slides.filter('.active').removeClass('active');
  let $target = $current.next('div');
  if (!$target.length)
    $target = $slides.first();
    
  $target.addClass('active');
})

#slideShow > div {
  display: none;
}

#slideShow div.active {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideShow">
  <div class="active">
    Screen 1
    <img src="img\Screenshot (1).png">
  </div>
  <div>
    Screen 4
    <img src="img\Screenshot (4).png">
  </div>
  <div>
    Screen 15
    <img src="img\Screenshot (15).png">
  </div>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
</div>

Answer 2

问题是你 show() 父母 <div> 但你也是 hide() <img> / <a> 孩子，再也不会show() 他们了。

删除：

$(this).hide();
$(this).siblings().hide();

并添加：

$(this).parent().hide();

那你应该没问题。在不改变任何其他逻辑的情况下，这给出了：

var a = new Array();
//$("#slideShow").children().first().show();
//$("#slideShow").children().first().next().hide();
//$("#slideShow").children("div").last().hide();
$("#slideShow>div").hide().first().show();

var i = 0
$(".next").click(function() {
  if (i == 2) {
    $(this).parent().hide();
    $("#first").show();
    i = 0;
  } else {
    //$(this).hide();
    //$(this).siblings().hide();
    $(this).parent().hide();
    $(this).parent().next().show();
    i++;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=slideShow>
  <div id="first">
    <img src="https://i.stack.imgur.com/XZ4V5.jpg" width=200>
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>
  <div>
    <img src="https://i.stack.imgur.com/7bI1Y.jpg" width=200>
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>
  <div>
    <img src="https://i.stack.imgur.com/lxthA.jpg" width=200>
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>
</div>

Answer 3

我会推荐SwiperJS

不过，这可能是解决您问题的快速方法

$(".prev").click(function() {
    //go to previous slide
    var activeSlide = $("div.active"),
      previousSlide = activeSlide.prev()

    //check if there is previous slide
    if (previousSlide.length !== 0) {
      activeSlide.removeClass("active")
      previousSlide.addClass("active")
    } else {
      alert("there is no previous slide!")
    }

  })


  $(".next").click(function() {
    //go to next slide
     var activeSlide = $("div.active"),
      nextSlide = activeSlide.next()

    //check if there is next slide
    if (nextSlide.length !== 0) {
      activeSlide.removeClass("active")
      nextSlide.addClass("active")
    } else {
      alert("there is no next slide!")
    }

  })

#slideShow > div{
  display:none;
  overflow:hidden;
  height:120pt;
  width:250pt;

}

#slideShow > div img{
  width:100%;
}


#slideShow > div.active{
  display:block;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=slideShow>
   <div class="active">
     <img src="img\Screenshot (1).png" alt="slide1">

   </div>

   <div>
     <img src="img\Screenshot (4).png" alt="slide 2">

   </div>

   <div>
     <img src="img\Screenshot (15).png" alt="slide 3">

   </div>

 </div>
 <a class="prev">&#10094;</a>
 <a class="next">&#10095;</a>