Question

我有一个包含一年中12个月的定义列表。我有3个月的时间，例如（1月，2月，3月）。我的目标是让列表进入下一个月点击最后一个孩子。例如，当单击March时，将显示April，并且1月将消失显示（2月，3月和4月），依此类推。

这是我的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

我遇到的问题是它只能运行一次。点击四月时，没有任何反应。我也没有在调试控制台上出现任何错误。

感谢任何帮助。感谢。

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

Answer 2

我只是更改if()语句，以检查.next('dt')元素.is(':hidden')是否。

示例： http://jsfiddle.net/patrick_dw/y5ngh/3/

if ($(this).next("dt").is(':hidden')) {
    $(this).next("dt").show(500);
    $("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
}

这是两个方向的完整版本。它可以简化一点，但这很有效。

示例： http://jsfiddle.net/patrick_dw/y5ngh/5/

$("#archive dl dt").each(function(index, value) {
    $(this).click(function() {
        if ($(this).next("dt").is(':hidden')) {
            $(this).next("dt").show(500);
            $("#archive dl dt:eq(" + (index - 2) + ")").hide(500);
        } else if ($(this).prev("dt").is(':hidden')) {
            $(this).prev("dt").show(500);
            $("#archive dl dt:eq(" + (index + 2) + ")").hide(500);
        }
    });
});

更新版本，减少选择和冗余：http://jsfiddle.net/patrick_dw/y5ngh/11/

$("#archive dl dt").click(function() {
    var $th = $(this), dir = ['next', 'prev'];
    if ($th.prev("dt").is(':hidden')) dir.reverse();
    else if ($th.next("dt").is(':visible')) return;
    $th[dir[0]]("dt").show(500)[dir[1] + 'Until'](':hidden').last().hide(500);
}).slice( 3 ).hide();

Answer 3

使用此

$(document).ready(function() 
{
    $("#archive dl dt:gt(2)").hide();
    $("#archive dl dt").click
    (
            function()
            {
                $("#archive dl dt").hide();
                if($(this).next()!=null && $(this).next().length!=0 && $(this).next().next()!=null && $(this).next().next().length!=0)
                {
                    $(this).next().show();
                    $(this).next().next().show();
                }
             }
    );
});

通过索引遍历定义列表的问题

3 个答案: