jQuery: Hinzufügen und Entfernen von Bildern

Ich bin neu in jQuery.
Ich habe 2 Platten: Wenn ich auf ein Bild in der linken panel, dann dieses Bild erscheint in der rechten Anzeige. Ich mache es mit clone(), so weit ich hier bin. Jetzt würde ich gerne das Bild in der rechten Seitenwand entfernt werden, wenn ich drauf klicke. Und die Anzahl der Inhaltsangabe Gewicht (img id) wird abhängen, wenn ich das hinzufügen oder entfernen der Bilder aus dem rechten Fenster. Kann mir bitte jemand helfen.

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

  • Das entfernen kann leicht getan werden, überprüfen Sie hier jsfiddle.net/joycse06/XLSmU/1 . Ich bin nicht sicher, wie Sie Sie wollen, zu zählen, das Gewicht.
  • Prüfen Sie das jsfiddle.net/joycse06/XLSmU/13 . Wenn Gewicht ist nur das hinzufügen/subtrahiert er den Wert in ID.
  • Freude, es funktioniert. Vielen Dank für die sehr schnelle Hilfe!!!
  • Sie sind das meiste willkommen, sir.
InformationsquelleAutor hihox123 | 2012-06-24
  1. 3
    $(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

    • thecodeparadox, es funktioniert. Vielen Dank für die sehr schnelle Hilfe!!!
    InformationsquelleAutor thecodeparadox
  2. 0

    Statt .clone() übergeben Sie das element selbst - $(this). So dass man am Ende mit output.append($(this)); ist, und dass statt des Klonens der element der rechten Liste verschieben. Das ist, wie .append und die Methoden, wie es funktioniert.

    Über das Gewicht zählen:

    1. Nicht verwenden id Attribute für gerade zahlen. Das ist nicht Ihre Absicht, und ein gültiges HTML-element id enthält mindestens ein Zeichen. Verwenden Sie stattdessen eine data-id Attribut, und verwenden Sie es mit .data().

    2. Zum zählen der Anzahl von "Gewicht" in der Liste, die Sie verwenden können .each zu beurteilen und die Summe der Menge, wie diese:

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

    3. Dann können Sie eine Funktion aus und es neu zu berechnen, das Gewicht mit jeder änderung in den Listen.

    4. Sollten Sie auch berücksichtigen, dass nach dem verschieben das element an die richtige Liste, es hat immer noch alle Ereignisse mit ihm verbunden. Wenn Sie die Ereignisse allgemeiner und weniger angewiesen auf welcher Liste Sie sich gerade befinden, das ist in Ordnung, aber sonst, sollten Sie .live("click", function(){...}); für Ihre Veranstaltung verbindlich statt, da die Elemente können verschiedene Ereignisse, auf die Ihnen nach dem Umzug in die nächste Liste.

    Ich habe ein Beispiel auf jsFiddle mit: http://jsfiddle.net/XLSmU/17/

    • Dvir Azulay, jetzt verstehe ich. Ich danke Ihnen sehr für Ihre Hilfe!
    • doch Sie umarmte die hässlich aussehende 3 Minuten zu spät-Lösung 😉 j/k, ich bin froh, dass du dein problem gelöst!
    • Ich benutze immer die id, attr, aber jetzt bin ich sicher, dass ich falsch war und ich mache mehr Fehler, ohne Ihre Hilfe. Ihre Hilfe ist sehr wichtig für meine lernen Prozess. Nochmals vielen Dank!
    InformationsquelleAutor Dvir Azulay
Schreibe einen Kommentar