使用jQuery查找div中的上一張和下一張圖片

Question

我需要從img中的div中的'active'類開始查找下一個和上一個圖像。 問題是，搜索上一張和下一張圖片的長度始終為0，因此什么也沒有發生。

<style>
.container #left img{
display:hidden;
}

.container #left img.active{
display:block;
}
</style>

<div class="container">

<div id="left">

<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />

</div>

</div>

<div class="arrow-left"></div>
<div class="arrow-right"></div>

<script>
$('.container #left img:first-child').addClass('active');

    $(document).off('click', '.arrow-left').on('click', '.arrow-left', function() {
        var prev = $('.container #left img.active').closest('div').prev().find('img');
        if (prev.length == 0) {
            prev = $('.container #left img:last');
        }
        $('.container #left img').removeClass('active');
        prev.addClass('active');
    });
</script>

Answer 1

正如我評論的那樣，您可以使用.next和.prev查找緊隨其后的/之前的同級。 而且由於id應該是唯一的，因此這里不需要類.container 。

因此，您可以將選擇器重寫為：

$('#left img.active').prev('img')

選擇上一張圖像。

然后，您可以使用.is('arrow-left')來決定用戶單擊左還是右，從而重新使用左右邏輯。

 $('.container #left img:first-child').addClass('active'); $(document).off('click', '.arrow-left, .arrow-right').on('click', '.arrow-left, .arrow-right', function() { var next; var circler; if ($(this).is('.arrow-left')) { next = 'prev'; circler = ':last'; } else { // or if there would be more arrows, use : else if ($(this).is('.arrow-right')) next = 'next'; circler = ':first'; } // Use bracket notation to dynamically decide which function to call. var nextTarget = $('#left img.active')[next]('img'); if (nextTarget.length == 0) { nextTarget = $('#left img' + circler); } $('#left img').removeClass('active'); nextTarget.addClass('active'); }); 

 #left img { display: inline-block; width: 20px; height: 20px; } #left img.active { background-color: cyan; } .arrow-left, .arrow-right { display: inline-block; width: 50px; background-color: lightgray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="left"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> </div> <div class="arrow-left">Left</div> <div class="arrow-right">Right</div>