用戶指定金額時動態克隆元素？ - JavaScript + HTML

用戶是否可以在<input>框中鍵入想要克隆並追加在頁面上的元素的數量？用戶指定金額時動態克隆元素？ - JavaScript + HTML

問題是，當用戶當前指定要克隆的元素數量時，元素數大於想要在第二次點擊中克隆的元素數。另外，是否可以隱藏要在HTML和CSS中克隆的原始元素？請參閱下面的代碼和JsFiddle Link。

$("#btn").click(function() { 
 
    var number = document.getElementById("member").value; 
 
    var e = $('.col'); 
 
    for (i=0;i<number;i++) { 
 
     e.clone().insertAfter(e); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Specify Amount of Member Cards Required:<input placeholder="e.g. 2" type="text" id="member" name="member" value=""> 
 
<button id="btn" onclick="addinputFields()">Go</button> 
 

 
<div> 
 

 
</div> 
 
<br> 
 
<div class="col">Member Card</div>

來源

2016-10-04 Dave

所以，你要隱藏以前克隆的元素呢？ – Li357

嗨，使用Javascript代碼，它通過識別類和克隆來克隆現有的元素。因此，我只想隱藏Javascript正在複製的原始元素。 – Dave

對HTML和Javascript輕微的調整。

增加了一個jsfiddle example下面的代碼。

HTML

Specify Amount of Member Cards Required: 

<input placeholder="e.g. 2" type="text" id="member" name="member" value=""> 
<button id="btn">Go</button> 

<div id="colTemplate" class="col">Member Card</div> 
<div id="container"></div>

CSS

/* hide the template */ 
#colTemplate { opacity: 0; visibility: hidden; }

的Javascript

$('#btn').click(() => { 
    let number = document.getElementById('member').value, 
     container = $('#container'), 
     template = $('#colTemplate'), 
     currentNumber = container.children().length; 

    if (currentNumber < number) { 
    // Add clones 
    for (let i = 0; i < number - currentNumber; i++) { 
     let clone = template.clone(true); 
     clone.attr('id', null); // Remove the id from the clone 
     container.append(clone); 
    } 
    } else if (number < currentNumber) { 
    // Remove extras 
    let extras = $('#container .col'); 
    for (let i = currentNumber - 1; i > number - 1; i--) { 
     extras.eq(i).remove(); 
    } 
    } 
});

來源

2016-10-04 04:11:17 Caleb

嗨，謝謝你對這個問題的貢獻。但是，下面的代碼的問題是當用戶嘗試第二次動態添加更多元素時，會有比最初指定的元素更多的動態元素。有沒有可能解決這些問題？謝謝！ – Dave

@Dave，我更新了上面的答案。它有一些小的邏輯問題。他們現在已經修好了。我還添加了一個鏈接到jsfiddle，以便您可以看到在那裏工作的代碼。 – Caleb

使用:first選擇克隆只有第一

$('.col:first').hide(); 
$("#btn").click(function() { 
    var number = $("#member").val(); 
    var e = $('.col:first'); 
    $('.col').not('.col:first').remove(); 
    for (i=0;i<number;i++) { 
     e.show().clone().insertAfter(e); 
    } 
    $('.col:first').hide(); 

});

演示：https://jsfiddle.net/j4jmyh0q/

來源

2016-10-04 04:06:10 madalinivascu

用戶指定金額時動態克隆元素？ - JavaScript + HTML

回答

相關問題