【发布时间】：2016-04-09 08:00:51
【问题描述】：
嗨，我已经为此工作了几个小时，但我仍然不明白我哪里出错了 这就是我们被要求做的事情
- 现在为每个新项目（不是第一个项目）添加一个删除按钮。点击这个按钮，对应的项目my-item，包括item-header和item-body，从页面中移除，其他不受影响
这就是我所做的
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="library/jquery.js"></script>
<script>
/*This task illustrates the sliding effects that can be produced
with jQuery. Create a div with the class my-item that contains two
other divs, the first with the class item-header and the second
with the class item-body. The item-header div contains an <h2> tag
with some text (e.g. Click Me). The item-body div also contains some
text, but the div is initially hidden. If the user clicks on the
<h2> headline, the div item-body should slide down and its contents
become visible. After another click on the headline, the div should
slide up and its contents become invisible
Extend your code from the previous task in such a way that a deep
copy of the first div with the class my-item can be appended to the
body of the document by clicking on a button. Be sure to modify your
event handler from the previous task so that it also works for the
new elements.
Now add a button Delete to each new item (not to the first one). By
clicking on this button, the corresponding item my-item, including
item-header and item-body, is removed from the page, while the
others are not affected.*/
$(document).ready(function() {
$('#copy').click(function(){
$('.my-item:last')//i have to exclude the first 1
.clone()
.append( '<button id = "away">Delete</button>' )
.appendTo('body')
;
});
$('.item-body').hide();
$(document).on( 'click','h2', function() {
if($(this).parent().next().is(':visible')){
$(this).parent().next().slideUp();
}
else{
$(this).parent().next().slideDown();
}
$(document).on('click', '#away', function() {
$(this).parent().remove();
});
});
});
</script>
</head>
<body>
<div class = 'my-item'>
<div class = 'item-header'>
<h2>Jesus is the only Hope</h2>
</div><!--closing tag for for div item-header-->
<div class = 'item-body'>
<h2>I believe in Him</h2>
<p>je leve les yeux vers les monts que jaime dou peut me venir ici le secours. Le secours me vient de lEternel meme</p>
</div><!--closing tag for the div item-body-->
</div><!-- This is the closing tag of div my_item-->
<button id ='copy'>copy</button>
</body>
</html>
请任何人给我任何提示，以便我知道我哪里出错了？
【问题讨论】：
-
一个问题是您创建了重复的 ID。