2015-10-22 2 views
1

У меня есть <div>, который я клонировал (дублировал), а также я установил его в петля, которая будет дублироваться до определенного предела.Javascript Clone and Loop issue

Loop не работает, любая проблема с моей петлей?

Вот мой JSFiddle

+0

http://jsfiddle.net/3L05as1n/2/ – Omidam81

+0

Это работает, но вы проверили, сколько раз он клонов ? Я установил его для клонирования 3 раза – Vinayak

+0

Да, я проверяю его прямо сейчас. вы не сбросили i до 0 после или до того, как – Omidam81

ответ

1

Вы должны положить var clone = original.cloneNode(true); внутри цикла while.

Это результат:

document.getElementById('button').onclick = duplicate; 
 
var i = 0; 
 
var counter4 = 3; 
 
var original = document.getElementById('duplicate'); 
 

 
function duplicate() { 
 
    while (i < counter4){ 
 
     var clone = original.cloneNode(true); // "deep" clone 
 
     console.log(clone) 
 
     clone.id = "duplicate"; // there can only be one element with an ID 
 
     original.parentNode.appendChild(clone); 
 
     i++; 
 
    } \t  \t 
 
}
#duplicate{ 
 
    width: 100px; 
 
    height: 50px; 
 
    margin-bottom: 10px; 
 
    background-color: red; 
 
}
<input type="button" id="button" value="Button"> 
 
    <div id="duplicate"> 
 
    </div>

+0

Да, я тоже пробовал это, но я хочу, чтобы один за другим время. – Vinayak

+0

Что вы имеете в виду под «покупок один за другим»? Если вы не создаете клон при каждом повторе, у вас есть только один клонированный объект. Вот почему клон показывает только один раз. –

0

Вы оставили var clone = original.cloneNode(true); вне цикла в то время, что означает, что только будучи клонировали раз каждый раз, когда вы нажмете кнопку. Если вы хотите, чтобы его клонировали три раза, вам нужно переместить этот оператор внутри цикла while.

http://jsfiddle.net/3L05as1n/9/

Кроме того, вы можете использовать цикл, чтобы сделать это вместо того, чтобы: http://jsfiddle.net/3L05as1n/10/