javascript - JQuery 在无序列表中查找下一个类

Question

我在我的网站上使用 JQuery/Ajax 来实现某些功能。目前，我有一个显示无序列表的左侧，每个列表元素都有一个类似 shop-thumb 的类，每当有人点击 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 调用中的内容——除了 .next click 函数之外，一切都工作正常:

<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();

});