Question

我正在制作一个价格表，每次按下“下一个”按钮时都会添加一行。我试图在每一行之后附加单个价格。但它只适用于前两行，但最后打印行数（'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>

Answer 1

看到这个工作小提琴：http://jsfiddle.net/hcq7d/2/

问题是变量insert是在i = 2时创建的。虽然您之后更改了i的值，但此更改不会影响insert的值，因为它已经创建。因此，不是仅仅克隆insert 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));

为什么追加只能工作一次？

1 个答案: