Добавить все элементы списка только к целевому последнему элементу

0

Я работаю над функцией jquery, чтобы (1-й) добавить элементы в неупорядоченный список по умолчанию (животное) и (2) показать/скрыть "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/

2 ответа

1
Лучший ответ

Измените объявление переменной на

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

Поскольку он добавит новый ввод для каждого элемента, а затем изменит событие click на:

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

Вам нужно будет клонировать deletebutton, иначе ссылка указывает на те же экземпляры:

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

Затем вы можете ссылаться на них по классу вместо переменной:

$('.delBtn').//stuff

скрипка

  • 0
    Спасибо! но как я могу настроить таргетинг на весь список, включая добавленные пункты меню?
  • 0
    Не уверен, что вы имеете в виду. Таргетировать их как? Они были бы в доме, так что селектор, как li , захватил бы их.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню