CODEWITHSUNDEEP
jqueryimageaddition
hihox123
hihox123

Reputation: 49

jQuery: Add and Remove images

I am new to jQuery. I have 2 panels: If i click on an image in the left panel, then this image will appear in the right panel. I do it with clone(), so far i am here. Now i would like to have the image in the right panel be removed, when i click on it. And the count of summary weight (from img id) will depend on if i add or remove the 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/

Upvotes: 4

Views: 6690

Answers (2)

dvir
dvir

Reputation: 5115

Instead of .clone(), just pass the element itself - $(this). So you end up with output.append($(this));, and that instead of cloning the element to the right list, will move it. That's how .append and the methods like it work.

About the weight counting:

  1. Don't use id attributes for just numbers. That's not their intention, and a valid HTML element id contains at least one character. Instead, use a data-id attribute, and use it with .data().

  2. To count the amount of "weight" in the list, you can use .each to iterate on it and sum the amount, like this:

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

  3. Then, you can make a function out of it and re-calculate the weight with every change in the lists.

  4. You should also take into consideration, that after moving the element to the right list, it still has all the events attached to it. If you make the events more general and less relying on which list they are currently in, that's fine; but otherwise, you should use .live("click", function(){...}); for your event binding instead, as the elements may have different events on them after moving to the next list.

I've set up an example at jsFiddle with it: http://jsfiddle.net/XLSmU/17/

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

$(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

Upvotes: 4

Related Questions