2

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

4

1 回答 1

1

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

问题是变量insert是在什么时候创建的i = 2。尽管您i之后更改了 的值，但此更改不会影响 的值，insert因为它已经创建。因此，与其只是克隆insertjQuery 对象，不如创建一个新对象，传入 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));
于 2013-02-26T22:36:01.343 回答