clone() начальный элемент после удаления

Question

У меня есть некоторые проблемы с этим в течение нескольких часов и не удалось найти решение, хотя я понимаю причину проблемы.

Я клонирую элементы один за другим, и я удаляю их из тела сверху, когда появляется полоса прокрутки. Элементы имеют событие mousedown, чтобы изменить цвет от красного до черного или серебристого в зависимости от числа, сгенерированного Math.random().

Моя проблема в том, что первый элемент удален (исходный с красным цветом), clone() клонирует следующий с измененным цветом. Я хочу клонировать только начальную площадь.

Это явление происходит потому, что я использовал метод .first(), чтобы сообщить машине, какой элемент я хочу клонировать. Если я удалю .first(), метод clone() будет создавать несколько элементов вместо одного за раз, но это также вызовет проблему с созданием измененного элемента цвета.

http://jsfiddle.net/cy3e5nro/

вот код:

var running = false 
$(document).click(function(){ 
    if(running){ 
     return; 
    } 
    running = true; 
var endless = setInterval(function(){ 

var random = Math.floor(2 * Math.random()); 
var math = (random == 1)? 0 : 1; 

$(".square").first().clone().addClass('number'+math).fadeIn().appendTo('#container').on('mousedown',function(){ 
    if(math<1){ 
     $(this).css('background-color','black').unbind('mousedown'); 
    } else { 
     $(this).css('background-color','silver').unbind('mousedown') 
    }}); 
$('body,html').animate({scrollTop:'+=70'},1000,'linear')},1000); 

$(window).on('scroll',function(){ 
if($(".square:first").offset().top + $(".square:first").height() < $(window).scrollTop()){ 
    $(".square:first").remove()} 
}); 
}) 

Помогите пожалуйста.

Answer 1

Это явление происходит потому, что я использовал метод .first(), чтобы сообщить машине, какой элемент я хочу клонировать.

Это звучит, как вы хотите, чтобы помнить, что для дальнейшего клонирования, поэтому рядом с вашей running переменной, добавьте:

var square; 

, а затем изменить:

$(".square").first().clone().addClass(... 

в

if (!square) { 
    square = $(".square").first(); 
} 
square.clone().addClass(... 

Updated Fiddle