Geek Answers Handbook

JQuery: adding and removing images

I am new to jQuery. I have 2 panels: if I click on the image in the left panel, this image will appear in the right panel. I do this with clone () while I'm here. Now I would like the image in the right pane to be deleted when I click on it. And the calculation of the total weight (from img id) will depend on whether I add or remove images from the right panel. Can someone please help me.

<!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>

Demo: http://jsfiddle.net/XLSmU/

+4
source share
2 answers
 $(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

+3
source

Instead of .clone() just pass the element itself - $(this) . So you get output.append($(this)); , and instead of cloning an item to the right list, it will move it. It's like .append and methods like this work.

About weight calculation:

  • Do not use id attributes only for numbers. This is not their intention, but a valid HTML id element containing at least one character. Instead, use the data-id attribute and use it with .data() .

  • To calculate the amount of “weight” in a list, you can use .each to iterate over it and add up the sum, for example:

     var weight = 0; $('#selectlist img').each(function(){ weight += $(this).data("id"); });

  • Then you can make a function out of it and recalculate the weight with each change in the lists.

  • You should also take into account that after moving an item to the correct list, there are still all events associated with it. If you make events more general and rely less on the list in which they are now, this is a fine; but otherwise you should use .live("click", function(){...}); to bind to an event instead, because after going to the next list the elements may have different events.

I installed an example with him in jsFiddle: http://jsfiddle.net/XLSmU/17/

0
source

More articles:


All Articles