Question

我尝试将“菜单”项添加到“动物列表”中，然后通过单击（切换）“编辑按钮”将“删除按钮”附加到列表项。问题是删除按钮仅添加到给定列表项而不是添加到新项目。当前代码可以在这里显示。 http://jsfiddle.net/7DP9L/9/

HTML

1. Add these items to the list
<div class="menu">                                    
  <a href="javascript:void(0)" id="addCat">Add_Cat</a>&nbsp;&nbsp;
  <a href="javascript:void(0)" id="addDog">Add_Dog</a>&nbsp;&nbsp;  
  <a href="javascript:void(0)" id="addLion">Add_Lion</a>    
</div>
<br />

2. Add/hide delete button from the list
<div>
    <a href="javascript:void(0)" id="editBtn">Edit Button</a>
</div>    

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

CSS

.delBtn{
    display:none;
}

JS

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

    // Step 1. Add items to the list
    $('#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");
    });

    // Step 2. Add/hide delete button from the list items    
    $('ul#animal li').append(deletebutton);

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



});

Answer 1

为什么不用你的li附加你的删除按钮？

HTML：

<div class="menu">                                    
  <a href="javascript:void(0)" data-animal="Cat" class="addAnimal">Add_Cat</a>&nbsp;&nbsp;
  <a href="javascript:void(0)"  data-animal="Dog" class="addAnimal">Add_Dog</a>&nbsp;&nbsp; 
  <a href="javascript:void(0)"  data-animal="Lion" class="addAnimal">Add_Lion</a>   
</div>

JS：

$('.addAnimal').one("click", function() {
    $('<li></li>')
               .append('<a href="#">'+$(this).data('animal')+'</a>')
               .append(deletebutton)
               .hide()
               .prependTo('ul#animal')
               .fadeIn("slow");
});

我还编辑了一点html来提出更通用的内容。 data-attributes对此非常有帮助。

编辑：当你处于“编辑模式”时，你也应该禁用“添加”按钮

FIDDLE

Jquery将元素追加到新列表项

1 个答案: