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

问题描述

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

我使用next()方法显示下一张图像。这是应该如何工作的： 当您单击链接（class="next"）时，将调用一个方法，该方法隐藏当前图像并显示下一个图像，并向计数器（i）加1，除非第三个图像。然后，它隐藏当前图像并显示第一张图像（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;

但是这些都不起作用。

解决方法

当您隐藏幻灯片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>

,

问题是您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>

,

我会推荐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>