我正在制作一份价目表，每次按下“下一步”按钮时都会添加一行。我试图在每行后面 append 单独的价格。然而，它仅适用于前两行，但在最后打印行数(“totalCabs”)效果很好。
这是 JS:
$(document).ready(function () {
var i = 2;
var totalPrice = 0;
var insert = $('<p class="nom">' +
'<select id="cab' + i + '">' +
'<option value="b1">B1</option>' +
'<option value="b2">B2</option>' +
'<option value="b3">B3</option>' +
'<option value="bnd">Base No Drawer</option>' +
'<option value="bt">Base Trey</option>' +
'<option value="d3">D3</option>' +
'<option value="d4">D4</option>' +
'<option value="sc">SC</option>' +
'</select>' +
'<input id="cab' + i + 'Size" type="text" />' +
'<div id="p' + i + '"></div>' +
'</p>');
$("body").on('click', 'button', (function() {
$("#poo").append(insert.clone());
var cabP = '#p' + (i - 1);
printPrice(cabP);
i ++;
document.getElementById('totalCabs').innerHTML = i-1;
}));
function printPrice(place){
var ap = " $111";
$(place).append(ap);
}
});
和 HTML:
<body>
<div id="poo">
<p class="nom">
<select id="cab1">
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="bnd">Base No Drawer</option>
<option value="bt">Base Trey</option>
<option value="d3">D3</option>
<option value="d4">D4</option>
<option value="sc">SC</option>
</select>
<input id="cab1Size" type="text" />
<div id="p1"></div>
</p>
</div>
<button id="btn1">Next</button>
<div id="cabEnter"></div>
<div id="cabPercentage"></div>
<div id="totalCabs"></div>
<div id="totalCabs2"></div>
<div id="subtotalPrice"></div>
<div id="totalPrice"></div>
最佳答案
查看这个工作 fiddle :http://jsfiddle.net/hcq7d/2/
问题在于变量insert是在i = 2时创建的。尽管您随后更改了 i 的值，但此更改不会影响 insert 的值，因为它已经创建。因此，不只是克隆 insert jQuery 对象，而是创建一个新的 jQuery 对象，并传入 i 的新值:
function getInsert(i){
return $('<p class="nom">' +
'<select id="cab' + i + '">' +
'<option value="b1">B1</option>' +
'<option value="b2">B2</option>' +
'<option value="b3">B3</option>' +
'<option value="bnd">Base No Drawer</option>' +
'<option value="bt">Base Trey</option>' +
'<option value="d3">D3</option>' +
'<option value="d4">D4</option>' +
'<option value="sc">SC</option>' +
'</select>' +
'<input id="cab' + i + 'Size" type="text" />' +
'<div id="p' + i + '"></div>' +
'</p>');
}
然后，在 click 处理程序中:
$("#poo").append(getInsert(i));
关于jquery - 为什么追加只能执行一次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15100481/