4

私はjQueryが初めてです。2 つのパネルがあります。左側のパネルの画像をクリックすると、この画像が右側のパネルに表示されます。私はクローン（）でそれを行います。これまでのところ、私はここにいます。右側のパネルの画像をクリックすると、画像が削除されます。そして、（img idからの）要約重量の数は、右側のパネルから画像を追加または削除するかどうかによって異なります。誰か助けてください。

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

デモ: http://jsfiddle.net/XLSmU/

4

2 に答える 2

4 
$(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
    });
});

デモ

于 2012-06-24T14:02:00.580 に答える
0

の代わりに.clone()、要素自体を渡すだけです - $(this)。したがって、最終的output.append($(this));には、要素を正しいリストに複製する代わりに、それを移動します。それがその方法.appendであり、そのような方法が機能します。

重量カウントについて:

  1. id数値だけに属性を使用しないでください。それは彼らの意図ではなく、有効な HTML 要素idには少なくとも 1 つの文字が含まれています。代わりに、data-id属性を使用し、それを で使用し.data()ます。

  2. .eachリスト内の「重量」の量を数えるには、次のように反復して量を合計するために使用できます。

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

  3. 次に、それから関数を作成し、リストが変更されるたびに重みを再計算できます。

  4. また、要素を正しいリストに移動した後も、すべてのイベントが関連付けられていることを考慮する必要があります。イベントをより一般的なものにして、現在どのリストにあるかに依存しないようにすれば、それで問題ありません。それ以外の場合は.live("click", function(){...});、次のリストに移動した後に要素に異なるイベントが発生する可能性があるため、代わりにイベント バインディングに使用する必要があります。

jsFiddle で例を設定しました: http://jsfiddle.net/XLSmU/17/

于 2012-06-24T13:58:55.323 に答える