這是我的代碼我想基于所有三個文本框附加資料，如果文本框值為 2，文本框 2 的值為 3，文本框 3 的值為 1，結果將是 2 個蘋果 3banans 和 1 個櫻桃，用戶還可以洗掉具有文本框值的專案 I已嘗試制作此代碼，但它正在洗掉所有專案你能幫我解決這個問題嗎
$(".change_qty").change(function(){
var total = $(this).val();
var oldLength = $(".box > span").length;
var change = total - oldLength;
var data_text= $(this).data("text");
if (change > 0) {
for (i = 0; i < change; i ) {
$(".box").append(`<span >${data_text}<br /></span>`);
}
}
else {
change = Math.abs(change)
$( ".box > span" ).each(function( index ) {
$(this).remove();
if (index == (change -1)) {
return false;
}
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control input-sm change_qty" type="number" data-text="apple">
<input class="form-control input-sm change_qty" type="number" data-text="bananas">
<input class="form-control input-sm change_qty" type="number" data-text="cherry">
<div class="box" ></div>uj5u.com熱心網友回復：
$(".box > span").length不考慮您的不同輸入型別。清除所有內容并在更改時重新創建整個輸出可能會更容易。這樣，條目也保持input.
$(".change_qty").change(function(){
//REM: Remove all entries
$(".box").empty();
//REM: Recreate all entries
$(".change_qty").each(function(){
let tThis = $(this);
let tText = tThis.data('text');
let tQuantity = Math.abs(tThis.val());
//REM: Append quantity of entries to .box
for(let i=0, j=tQuantity; i<j; i ){
$(".box").append(`<span >${tText}<br /></span>`)
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control input-sm change_qty" type="number" data-text="apple">
<input class="form-control input-sm change_qty" type="number" data-text="bananas">
<input class="form-control input-sm change_qty" type="number" data-text="cherry">
<div class="box" ></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/466397.html
標籤：javascript html jQuery 循环 附加
下一篇：用JQuery隱藏一個div