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

Question

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

我使用next()方法显示下一张图片。这是它应该如何工作：当您单击 link (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>

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

在 jQuery

css({"display":"block"})

show()

使用 Javascript 语法代替 jQuery：document.getElementById("first").show();
遍历而不是使用id：$(this).parent().parent().show;

然而这些都不起作用。

Answer 1

问题是你 show() parent <div> 但你也 hide() <img> / <a> children 再也不会 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 2

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

更好的方法是使用 class 跟踪活动幻灯片并移动到 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 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>

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

why show() method does not work in jQuery?

html

javascript

jquery

slider

slideshow