jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery:添加和删除图像大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是jQuery的新手.
我有2个面板:如果我点击左侧面板中的图像,则该图像将出现在右侧面板中.我用clone()来做,到目前为止我在这里.现在,当我点击它时,我希望删除右侧面板中的图像.汇总权重(来自img id)将取决于我是否在右侧面板中添加删除图像.有人可以帮帮我吗. @H_618_6@ @H_618_6@
<!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" />
<@R_874_10283@e>test</@R_874_10283@e>
<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>
@H_618_6@演示: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 @R_262_10586@l 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 @R_262_10586@l
        image.remove();  // remove the image
        $('#sumcount').text(sumWeight); // updating the @R_262_10586@l weight
    });
});
@H_618_6@DEMO

大佬总结

以上是大佬教程为你收集整理的jQuery:添加和删除图像全部内容,希望文章能够帮你解决jQuery:添加和删除图像所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。