我正在开发一个 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 </a>
<a href="javascript:void(0)" id="addDog">AddDog </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/
最佳答案
将您的变量声明更改为
var deletebutton = '<input class="delBtn" type="submit" value="delete"/>';
因为它将向每个元素附加一个新的输入,然后将点击事件更改为:
$('#editBtn').click(function(){
$(".delBtn").toggle();
});
关于javascript - 附加所有列表项仅针对最后一项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21918772/