javascript - 附加所有列表项仅针对最后一项

Question

我正在开发一个 jquery 函数，以(1st)将元素添加到默认的无序列表(动物)中，以及(2nd)在单击时显示/隐藏列表项(包括新菜单列表项)上的“删除按钮” 'editBtn'。我想选择所有列表项，但它只显示到最后一项..

JS

$(function() {
    var cat = $('<li><a href="#" class="">Cat</a></li>');
    var dog = $('<li><a href="#" class="">Dog</a></li>');
    var lion = $('<li><a href="#" class="">Lion</a></li></li>');
    var deletebutton = $('<input class="delBtn" type="submit" value="delete"/>');

    $('ul#animal li').append(deletebutton);

    $('#editBtn').click(function(){
        deletebutton.toggle();
    });     

    //limit to one click event
    $('#addCat').one("click", function() {
        $(cat).hide().prependTo('ul#animal').fadeIn("slow");
    });

    $('#addDog').one("click", function() {
        $(dog).hide().prependTo('ul#animal').fadeIn("slow");
    });

    $('#addLion').one("click", function() {
        $(lion).hide().prependTo('ul#animal').fadeIn("slow");
    });

});

HTML

<div class="menu">                                    
  <a href="javascript:void(0)" id="addCat">AddCat&nbsp;&nbsp;</a>
  <a href="javascript:void(0)" id="addDog">AddDog&nbsp;&nbsp;</a>       
  <a href="javascript:void(0)" id="addLion">AddLion</a> 
</div>
<br />
<br />

<div>
    <a href="#" id="editBtn">Edit Button</a>
</div>    

<div class="screen">
    <ul id="animal">
        <li><a href="#" class="">Bird</a></li>
        <li><a href="#" class="">Snake</a></li>
        <li><a href="#" class="">fish</a></li>
    </ul>
</div>  

CSS

.menu{
    background-color: yellow;
    display: inline;
}
.screen{
    background-color: grey;
}
.delBtn{
    display:none;
}

jsfiddle http://jsfiddle.net/Ne63M/

Answer 1

将您的变量声明更改为

var deletebutton = '<input class="delBtn" type="submit" value="delete"/>';

因为它将向每个元素附加一个新的输入，然后将点击事件更改为:

$('#editBtn').click(function(){
    $(".delBtn").toggle();
});