使用jQuery显示和隐藏

Question

在jquery中有许多添加和删除示例。 但是我的代码与示例有些不同。 当我单击添加时，它显示第二，如果我再次单击添加，我想显示第三，以及当我单击删除时，也将隐藏第三直到五。 这是我的代码

的CSS

#second {
    display: none;
}
#third {
    display: none;
}
#forth {
    display: none;
}
#fifth {
    display: none;
}

的HTML

<div id="header">
     <a href="#" id="add1">add</a> - <a href="#" id="remove">remove</a>
    <div id="first"><a href="#">first</a></div>            
    <div id="second"><a href="#">second</a></div>
    <div id="third"><a href="#">third</a></div>
    <div id="forth"><a href="#">forth</a></div>
    <div id="fifth"><a href="#">fifth</a></div>
</div>`

的JavaScript

$(document).ready(
    function() {
        $("#add1").click(function() {
            $("#second").show();
        });
        $("#remove").click(function() {
            $("#second").hide();
        });
    });

这里是代码 JSfiddle

Answer 1

这是您可以使用的一种方法。 首先，将一个类添加到要显示/隐藏的所有元素中。 在这种情况下，我使用了类toggle ：

<div id="header">
    <a href="#" id="add1">add</a> - <a href="#" id="remove">remove</a>
    <div id="first" class="toggle"><a href="#">first</a></div>            
    <div id="second" class="toggle"><a href="#">second</a></div>
    <div id="third" class="toggle"><a href="#">third</a></div>
    <div id="forth" class="toggle"><a href="#">forth</a></div>
    <div id="fifth" class="toggle"><a href="#">fifth</a></div>
</div>

然后，当您添加元素时， first使用函数使用类toggle来查找第一个不可见的元素并将其显示。 当您要删除元素时，请使用last函数查找最后一个不可见的元素并将其隐藏：

$(document).ready(function() {
    // when add is clicked, show first not visible element with class 'toggle'
    $("#add1").click(function() {
        $('.toggle:not(:visible)').first().show();
    });
    // when remove is clicked, hide last visible element with class 'toggle'
    $("#remove").click(function() {
        $('.toggle:visible').last().hide();
    });
});

这是更新的JSFiddle