大佬教程收集整理的这篇文章主要介绍了jQuery:添加和删除图像,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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,请注明来意。