Question

我认为我的问题可能很简单，但在尝试了不同的方法之后，我就得不到它了。

我想要实现的UI基本上是这样的：

-Prev |图1（活动）|图2 |图3 |图片n |下一个 -

我希望允许用户通过按“下一个”或“上一个”按钮来更改活动图像。

我的用户界面的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类，然后我想将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元素并再次按下“Next”按钮时，第一个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");
    }); 
 });

对于第二个要求，您可以为first和last锚标记添加ID ，并将选择器与其进行比较并从那里开始

Answer 2

也许这个：

$(function(){
        $('#next').click(function(){
                var $elem = $('.slideshow .pic-act').removeClass('pic-act').addClass('pic').next('.pic');
                if ($elem.length < 1){
                        $('.slideshow .pic').eq(0).addClass('pic-act').removeClass('pic');
                }else{
                        $elem.removeClass('pic').addClass('pic-act');
                }
        });     
});

Answer 3

我在您的代码中看到的主要问题是，您在并排查找两个元素的全局空间，而不是查找当前选定的元素，然后遍历兄弟姐妹。

如果您正在创建幻灯片作为学习练习或个人项目，我建议您查看jQuery traversing documentation，正如其他纯粹的代码答案所暗示的那样。你编写代码的方式表明你可能仍在试图理解jQuery如何组合在一起，花一些时间在jQuery网站上的优秀文档，通过一些教程和/或获得一本jQuery书可能是个好主意。。提示：链接很棒

如果您要为专业项目创建幻灯片，我建议您查找其他人创建的插件。它需要花费更少的时间并且可能具有更高的质量，因为它将由具有jQuery / JS经验的人创建（我将幻灯片的实现与专业人员的实现进行了比较：专业人员的头脑和肩膀都在上面矿）。

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

3 个答案: