2

「次へ」ボタンが押されるたびに行を追加する価格表を作成しています。各行の後に個別の価格を追加しようとしています。ただし、最初の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したがって、jQueryオブジェクトのクローンを作成するだけでなくinsert、実際に新しいオブジェクトを作成して、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 に答える