jQuery 在第一次匹配后获取下一个元素

Question

我认为我的问题可能很简单，但在尝试了不同的方法后我就是不明白。

我想要实现的用户界面基本上是这样的:

-上一页 |图片 1(事件)|图片 2 |图 3 |图像n|下一页-

我想允许用户通过按“下一个”或“上一个”按钮来更改事件图像。

我的 UI 的 HTML 如下所示:

<ul class="slideshow">
    <li><a href="#" id="prev">Prev</a></li>
    <li><a href="#" class="pic-act"><img src="1.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="2.png"  class="thumb" /></a></li>
    <li><a href="#" class="pic"><img src="3.png"  class="thumb" /></a></li>
    <li><a href="#" id="prev">Next</a></li>     
</ul>

我想创建 jQuery 脚本，该脚本将找到第一个具有 pic-act 类的 li 元素以及附加有 pic 类的下一个元素。之后，我想从第一个元素中删除 pic-act 类并向其添加 pic-act 类，然后我想将 pic-act 类添加到第二个元素。

我尝试使用以下 jQuery 代码来完成此任务

$(document).ready(function() {
$("#next").click(function(){
    var next = $(".pic-act ~ .pic");
    $(next).attr("class", "pic-act");
    $(".pic_act:first").attr("class", pic);     
}); 
});   

不幸的是，此代码无法找到下一个非 pic-act 元素:(

我的第二个要求是当用户到达最后一个 li 元素并再次按“下一步”按钮时，第一个 li 元素将变为事件状态。 (与“上一页”按钮相同)

我希望这是有道理的。

提前非常感谢您!

Answer 1

这应该有效

 $(document).ready(function() {
   $("#next").click(function(){ 
      var elem = $(this).prev(".pic-art");// once you got here you would compare to anchor tag id last for second requirement
      var nextele = elem.find(".pic");
      elem.addClass("pic");
      elem.removeClass("pic-act");
      nextele.addClass("pic-act");
      nextele.removeClass("pic");
    }); 
 });

对于第二个要求，您只需添加一个 id 到 first 和 last anchor 标记，然后将选择器与其进行比较，然后从那里