為什么 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>