クローンし、潜在的に無限のリストから要素を追加します

Question

これでSOコミュニティにバグを残して申し訳ありませんが、私は自分の人生で進む必要があります：クリック可能な画像の潜在的な無限リストが将来これらの画像をクリックすると、別々の要素で最大2つのスポットを埋めることができます。これの次のステップは、未塗りの次の要素を塗りつぶすだけでなく、リストから再度選択すると、元の画像に置き換えてスポット1に戻ります。私はこれを達成するための正しいロジックを適用する方法を考えることができません。ここまで私がこれまで持っていたことがあります。

<div class="spot-1"></div><!--start here --> 
<div class="spot-2"></div><!--then here --> 

<div class="img-wrap"> 
<div><img class="PutinSpot"src="someIMG0.jpg" alt="dufuq?"></div> 
<div><img class="PutinSpot"src="someIMG1.jpg" alt="dufuq?"></div> 
<div><img class="PutinSpot"src="someIMG2.jpg" alt="dufuq?"></div> 
<div><img class="PutinSpot"src="someIMG3.jpg" alt="dufuq?"></div> 
<div><img class="PutinSpot"src="someIMG4.jpg" alt="dufuq?"></div> 
</div><!--potentially^^^^^ infinite list--> 

ここにはJqueryがあります。

明確にする。 リストを無期限に拡張できる必要があります。しかし、img-wrap divからクリックした画像をspot-1に入れ、次にspot-2にクリックされた次の画像をいっぱいにして、両方がいっぱいであるかどうかを確認してください。appendTo spot-再び1。これはループだろうか？スイッチケース？

Answer 1

プログラミング時に、データがどのように流れるかを考えよう。最終的な動作を達成するためにDOMを操作することは、二次懸案事項です。

ユーザーが2つの 最大数を選択することができ、そこから画像の可変サイズのリストがあります：のは、私が正しく要件を理解仮定して、あなたの問題をこのように言い換えてみましょう。

$(document).ready(function() { 
 
    $('.PutinSpot').click(function() { 
 
    selectImage(this); 
 
    }); 
 
}); 
 

 
var selectedImages = []; 
 

 
function selectImage(imageEl) { 
 
    // Remove an element from the front of the array if length is 2 
 
    // This way the array will allways have 2 elements maximum 
 
    if (selectedImages.length == 2) selectedImages.shift(); 
 

 
    selectedImages.push(imageEl); 
 

 
    // For each selected image, find the correct div and 
 
    // replace the content completely with the correct image 
 
    selectedImages.forEach(function(img, i) { 
 
    var targetDiv = $('.spot-' + (i + 1)); 
 
    targetDiv.html($(img).clone()); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Selected Image 1: <div class="spot-1"></div> 
 
<!--start here --> 
 
Selected Image 2: <div class="spot-2"></div> 
 
<!--then here --> 
 
<hr/> 
 
<div class="img-wrap"> 
 
    <div><img class="PutinSpot" src="http://placehold.it/50x50/000000" alt="dufuq?"></div> 
 
    <div><img class="PutinSpot" src="http://placehold.it/50x50/ff0000" alt="dufuq?"></div> 
 
    <div><img class="PutinSpot" src="http://placehold.it/50x50/ffff00" alt="dufuq?"></div> 
 
    <div><img class="PutinSpot" src="http://placehold.it/50x50/f110f2f" alt="dufuq?"></div> 
 
    <div><img class="PutinSpot" src="http://placehold.it/50x50/0000ff" alt="dufuq?"></div> 
 
</div>

：現在選択されている画像はイメージがすでにDOMにあるコンテキストでこの問題を解決するには、次のようになり2つの 別々のスポット

に表示されます