//需求：對列表的增刪改
//代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.list{
list-style: none;
width: 400px;
margin: 50px auto;
}
.list li{
border: 1px solid #ccc;
margin-bottom: 20px;
height: 30px;
}
.list .friut{
line-height: 30px;
}
.change,.del{
float: right;
height: 24px;
width: 40px;
margin-top: 3px;
text-align: center;
color: #fff;
}
.change{
background-color:yellow;
margin-left: 10px;
}
.del{
background-color: red;
}
.addBtn{
width: 400px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: green;
margin:0 auto;
}
</style>
</head>
<body>
<ul class="list">
<li>
<span class="friut">西瓜</span>
<span class="change">修改</span>
<span class="del">刪除</span>
</li>
<li>
<span class="friut">蘋果</span>
<span class="change">修改</span>
<span class="del">刪除</span>
</li>
<li>
<span class="friut">香蕉</span>
<span class="change">修改</span>
<span class="del">刪除</span>
</li>
</ul>
<div class="addBtn">添加一項</div>
<script type="text/javascript">
// 添加按鈕的點擊事件
$(".addBtn").click(function(){
var res = window.prompt("添加一項"); //彈出添加一項
if (res) {
// html（內容字符串）
var str = "<span class='friut'>"+res+"</span><span class='change'>修改</span><span class='del'>刪除</span>";
$("<li></li>").html(str).appendTo($(".list")); //動態的往類名為list的添加一個子元素
}
});
// 事件委托，將刪除和修改按鈕的事件（通過事件冒泡）委托給.list
$(".list").click(function(e){
// console.log(this);
// event 對象 記錄事件發生時的相關信息的對象
// event.target 事件發生的源目標
//event.target -><span class='del'>刪除</span>
//this->.list
if ($(e.target).text()=="刪除") {
var res = window.confirm("是否確定刪除");
if (res) {
// 移除li
$(e.target).parent().remove();
}
}else if ($(e.target).text()=="修改") {
var res = window.prompt("確認修改？");
if (res) {
// 將friut類的span標簽內容修改
$(e.target).prev().text(res);
}
}
})
</script>
</body>
</html>