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();
    });
});

这是updated JSFiddle

使用jquery显示和隐藏

1 个答案: