Question

我正在创建一个标题区域以与幻灯片放映一起，以便幻灯片显示图像发生变化;字幕也是如此。

我希望做同样的事情，布局是：

<div id="captions-container">
    <div class="caption first">
     ...
    </div>
    <div class="caption">
    ...
    </div>
    <div class="caption">
     ...
    </div>
    <div class="caption last">
     ...
    </div>  
</div>

他的问题的答案是：

$("#questions-container").find(":visible").hide().next().show();

我当前的脚本看起来像是

$(".next").click(function() {
    $("#caption-container").find(":visible").hide().next().show();
});

哪个工作完美，但我想添加一个新功能。当达到最后一个标题时，在下一次单击时，以典型的轮播循环方式返回第一个标题？

Answer 1

if( $("#questions-container").find(":visible").hasClass('last') ) {
    $("#questions-container .last").hide();
    $("#questions-container .first").show();
}

我没有对此进行测试，但是这些内容应该可以为您提供所需的结果。希望这有帮助！

Answer 2

这样的东西会起作用。使用length next()查看是否存在，否则从头开始

$(".next").click(function() {
    var $current=$("#captions-container .caption:visible").hide();
    var $next = $current.next().length ? $current.next() : $current.siblings('.first');
        $next.show();
});

的 DEMO

标题：隐藏当前元素，显示下一个元素然后循环

2 个答案: