Question

我在这方面遇到了一些问题几个小时并没有找到解决办法，虽然我理解问题的原因。

我逐个克隆元素，当滚动条出现时我将它们从顶部移除。元素有一个mousedown事件，可根据Math.random（）生成的数字将颜色从红色更改为黑色或银色。

我的问题是当第一个元素被移除时（最初的元素为红色），clone（）克隆下一个元素并改变颜色。我想只克隆初始方块。

这种现象的发生是因为我使用方法.first()来告诉机器我要克隆的元素。如果我删除.first()，clone（）方法将创建多个元素而不是每次一个元素，但这也会导致问题创建更改的颜色元素。

这是代码：

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

clone（）删除后的初始元素

1 个答案: