gpt4 book ai didi

jQuery:添加和删除图像

转载 作者:行者123 更新时间:2023-12-01 00:19:32 27 4
gpt4 key购买 nike

我是 jQuery 新手。我有 2 个面板:如果我单击左侧面板中的图像,则该图像将出现在右侧面板中。我用clone()来做,到目前为止我在这里。现在,当我单击右侧面板中的图像时,我希望将其删除。摘要权重的计数(来自 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/

最佳答案

$(function() {
var output = $('#output'),
sumWeight = 0;

$('#selectlist img').click(function() {
var imageClone = $(this).clone();
output.append(imageClone);
sumWeight += parseInt( this.id, 10); // getting weight from image id
$('#sumcount').text(sumWeight); /// updating the total weight
});

// for removing image from #output
// you need delegate event, because images are added dynamically

output.on('click', 'img', function() {
var image = $(this),
weight = parseInt( this.id, 10 ); // getting id of remove image
sumWeight -= weight; // subtract weight from total
image.remove(); // remove the image
$('#sumcount').text(sumWeight); // updating the total weight
});
});

<强> DEMO

关于jQuery:添加和删除图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11178022/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com