如何对一组 div 元素使用 prev/next

Question

所以我试着让一整组元素从我这里拿来的代码开始，然后我编辑了它

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
<div class="divs">
    <div class="cls1">
        <div>Yes 1 </div>
        <div>Element 1 </div>
    </div>
    <div class="cls2">
        <div>Yes 1 </div>
        <div>Element 1 </div>
    </div>
    <div class="cls3">
        <div>Yes 1 </div>
        <div>Element 1 </div>
    </div>

</div>
<a id="next">next</a>
<a id="prev">prev</a>
<script>
    $(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });
    
    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

</script>
</html>

当我点击下一步时，没有任何显示 up.And 当我向它发送垃圾邮件时，随机元素分别出现，当我点击下一步时，我是两个元素都出现。

Answer 1

如果您没有使用类，请使用类似“.divs>div”的内容来查明元素包含在选择中。
这只是我的喜好，但是如果您编码，如果意思清楚，一行就可以，但是对于这一行，似乎很浪费，而且一眼看不明白。分配给变量也比多次搜索更好

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
<div class="divs">
    <div class="item cls1">
        <div>Yes 1 </div>
        <div>Element 1 </div>
    </div>
    <div class="item cls2">
        <div>Yes 2 </div>
        <div>Element 2 </div>
    </div>
    <div class="item cls3">
        <div>Yes 3 </div>
        <div>Element 3 </div>
    </div>

</div>
<a id="next">next</a>
<a id="prev">prev</a>
<script>
    $(document).ready(function(){
    $(".divs>div").each(function(e) {
        if (e != 0)
          $(this).hide();
    });
    
    $("#next").click(function(){
      const visibleDiv = $(".divs>div:visible");
      const nextDiv = visibleDiv.next();
      if(nextDiv.length > 0) {
        visibleDiv.hide();
        nextDiv.show();
      }

    });

    $("#prev").click(function(){
      const visibleDiv = $(".divs>div:visible");
      const prevDiv = visibleDiv.prev();
      if(prevDiv.length > 0) {
        visibleDiv.hide();
        prevDiv.show();
      }
    });
});

</script>
</html>

如何对一组 div 元素使用 prev/next

How to use prev/next for a group of div elements

html

javascript

jquery