Question

我正在研究一个jquery函数，以便（第一次）将元素添加到默认无序列表（动物）中，并且（第二次）在列表项（包括新菜单列表项）上显示/隐藏'deletebutton'时单击'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"/>';

因为它会为每个项添加一个新输入，然后将click事件更改为：

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

Answer 2

您需要克隆deletebutton，否则引用指向相同的实例：

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

然后你可以按类而不是变量来引用它们：

$('.delBtn'). //stuff

Fiddle

仅追加最后一项的所有列表项

2 个答案: