我是 jQuery 的新手。我有 2 个面板:如果我单击左侧面板中的图像,则该图像将出现在右侧面板中。我用克隆()来做,到目前为止我在这里。现在,当我单击它时,我希望删除右侧面板中的图像。并且摘要权重的计数(来自 img id)将取决于我是否从右侧面板添加或删除图像。有人可以帮帮我吗。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<style type="text/css">
#output, #selectList {
width: 202px;
border: 1px solid #000;
margin: 2px;
height: 400px;
float: left
}
</style>
</head>
<body>
summary weight: <div id="sumcount"></div>kg<br />
<div id="selectList">
<img id="34" src="http://placekitten.com/80/80" />
<img id="21" src="http://placekitten.com/81/81" />
<img id="11" src="http://placekitten.com/g/80/80" />
<img id="5" src="http://placekitten.com/g/81/81" />
<img id="9" src="http://placekitten.com/g/82/82" />
</div>
<div id="output">
</div>
<script type="text/javascript">
$(function(){
var output = $('#output');
//$('#selectList img').each(function(i, el){
// $(this).addClass('img' + i);
// });
$('#selectList img').click(function(){
output.append($(this).clone());
});
// dont work
$('#output img').click(function(){
output.remove($(this));
});
});
</script>
</body>
</html>
演示:http: //jsfiddle.net/XLSmU/