jquery - 按索引遍历定义列表时出现问题

Question

我有一个包含一年中 12 个月的定义列表。例如，我一次展示 3 个月(一月、二月、三月)。我的目标是在单击最后一个子项时将列表前进到下个月。例如，当单击“三月”时，“四月”将出现，“一月”将消失，显示(二月、三月和四月)，依此类推。

这是我的 HTML

<div id="archive" class="archive">
    <div>Archive</div>
    <dl>
        <dt>January</dt>
        <dt>February</dt>
        <dt>March</dt>
        <dt>April</dt>
        <dt>May</dt>
        <dt>June</dt>
        <dt>July</dt>
        <dt>August</dt>
        <dt>September</dt>
        <dt>October</dt>
        <dt>November</dt>
        <dt>December</dt>
    </dl>
</div>

这是 jQuery 代码

$(document).ready(function() {
$("#archive dl dt:gt(2)").hide();

$("#archive dl dt").each(function(index, value) {
        $(this).click(function() {
            if ($("#archive dl dt:visible").size() == (index + 1)) {
                $(this).next("dt").show(500);
                $("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
            }
        });
    });
});

我还有一个 jfiddle 链接: Live Example

我遇到的问题是它只能工作一次。单击 April 后，没有任何反应。我在调试控制台上也没有收到任何错误。

感谢任何帮助。谢谢。

Answer 1

这可以简化很多，只需使用 next() 和 prev()

$("#archive dl dt:gt(2)").hide();

// we'll use not(":last") so that December can't be clicked
$("#archive dl dt").not(":last").each(function(index, value) {
    $(this).click(function() {
            $(this).next().show(500);
            $(this).prev().prev().hide(500);
    });
});

Try it here