JQuery在無序列表中查找下一個類

Question

我在我的網站上使用了一些功能的JQuery/Ajax。目前，我有一個左側顯示無序列表，每個列表元素都有一個類似shop-thumb的類，每當點擊一個商店大拇指時，然後右側的內容用Ajax加載。

現在我想包含一個下一個/上一個按鈕，這樣用戶可以點擊下一個（從右側），下一個列表項用加載ajax來更改右側的內容。

這裏是我所參與工作的真正的基本版本：

<div class="thumbs"> 
    <ul class="products"> 
     <li class="shop-thumb"><a href="www.google.com/123"><img src="www.google.com/image1" /></a></li> 
     <li class="shop-thumb"><a href="www.google.com/456"><img src="www.google.com/image2" /></a></li> 
     <li class="shop-thumb"><a href="www.google.com/789"><img src="www.google.com/image3" /></a></li> 
     <li class="shop-thumb"><a href="www.google.com/101112"><img src="www.google.com/image4" /></a></li> 
     <li class="shop-thumb"><a href="www.google.com/131415"><img src="www.google.com/image5" /></a></li> 
    </ul> 
</div> 

<div class="paginate"> 
    <div class="prev">Prev</div> | <div class="next">Next</div> 
</div> 

<div class="main"> 
<!-- Ajax comes in here --> 
</div> 

以下是我在我的JQuery/Ajax調用 - 除了。接下來單擊功能一切正常：

<script> 
jQuery(document).ready(function($){ 
    var defaultValue = $("ul.products li.shop-thumb a:first").attr("href"); 

    $(".main").load(defaultValue); 

    $("ul.products li.shop-thumb a").click(function(e){ 
     e.preventDefault(); 

     var addressValue = $(this).attr("href"); 
    $(".main").load(addressValue); 

    }); 

    $(".next").click(function() { 
     $("ul.products").next(); 
     var newValue = $("ul.products .shop-thumb a").attr("href"); 
     $(".main").load(newValue); 
    }); 

}); 
</script> 

任何幫助將不勝感激如何我可以實現這個下一個/上一個功能。我以爲我應該使用.next()，.find()或.nextAll

如果你不介意我扔骨頭和展示我舉一個例子，所以我能看到和我做錯了什麼。

Answer 1

您需要有一個當前項目的標記以查明下一個項目是什麼。一旦你找到下一個項目，你可以直接開槍該項目的單擊事件調用處理器

您可以使用一類像

jQuery(document).ready(function ($) { 
    $("ul.products li.shop-thumb a").click(function (e) { 
     e.preventDefault(); 

     var addressValue = $(this).attr("href"); 
     $(".main").load(addressValue); 

     //remove the active class from previous item 
     $("ul.products li.active").removeClass('active'); 
     //add the active class to the current li element 
     $(this).closest('li').addClass('active'); 
    }); 

    $(".next").click(function() { 
     //find the next item and trigger the click event 
     $("ul.products li.active").next().find('a').trigger('click'); 
    }); 

    //default loading 
    $("ul.products li.shop-thumb a:first").click(); 

});