1

私はjqueryでショッピングカートを構築しようとしていますが、それをすべて機能させる方法を考え出すのに苦労しています。

私のウェブサイトで誰かが広告スペースを購入できる場所があります。5つの列（郵便番号列（入力）、サービス列（選択ボックス）、広告サイズ（選択ボックス）、広告価格（読み取り専用入力）、および行を追加または削除するためのオプション列を含むテーブルがあります。すべてが機能していました。大きい広告または小さい広告のオプションを追加し、広告サイズに応じて異なる価格を請求するまでは、正しく。

        <table style='width: 100%;' id='adsTable'>
            <tr class='addedRow'>
                <td>Zip</td>
                <td>Service</td>
                <td>Ad Size</td>
                <td>Price</td>
                <td>Options</td>
            </tr>
            <tr>
                <td><input type='text' maxlength='5' class='zip' /></td>
                <td>
                    <select name='serviceType' class='serviceType rounded'>
                        <option value="">Choose One...</option>
                        <option>Plumbing</option>
                        <option>Roofing</option>
                        <option>HVAC</option>
                        <option>Appliance Repair</option>
                        <option>Flooring</option>
                        <option>Electrical</option>
                        <option>Doors/Windows</option>
                        <option>Siding</option>
                        <option>Other</option>
                    </select>
                </td>
                <td>
                    <select name='' class='ad_size'>
                        <option value='4.99' class='ad_lg'>Large</option>
                        <option value='1.99' class='ad_sm'>Small</option>
                    </select>
                </td>
                <td>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-usd"></i></span>
                        <input class='addPrice' value='4.99' type='text' readonly='readonly' />
                    </div>
                </td>
                    <td class='options'>

                    </td>
            </tr>

        </table>

私は自分の jquery を取り除き、数回やり直してすべてを理解しようとしましたが、広告サイズの選択後にすべての入力を追加する方法に行き詰まっています。ここに来る前に終了したjqueryは次のとおりです

    //Varible that stores the extra table row
    var $adTableRow = "<tr class='addedRow'><td><input type='text' maxlength='5' /></td><td><select name='serviceType' id='serviceType' class='rounded'><option value=''>Choose One...</option><option>Plumbing</option>    <option>Drain Cleaning</option><option>Roofing</option><option>HVAC</option><option>Appliance Repair</option><option>Flooring</option>  <option>Electrical</option><option>Doors/Windows</option><option>Siding</option><option>Other</option></select></td><td><select name='' class='ad_size'><option value='4.99' class='ad_lg'>Large</option><option value='1.99' class='ad_sm'>Small</option></select></td><td><div class='input-prepend'><span class='add-on'><i class='icon-usd'></i></span><input class='addPrice' value='4.99' type='text' readonly='readonly' /></div></td><td class='options'><i class='icon-remove removeAd' title='Remove This Ad'></i></td></tr>";

    $(document).ready(function() {  
        $('#addTotalBox').val("4.99");
        //Assign the right price amount according to users selection
        $(".ad_size").on('change', function() {
            //Grab the value of the select box and store it in a variable
            var ad_cost = $(this).val();
            //Insert the value into the pricing box             
            $(this).parent().next().children().find('.addPrice').val(ad_cost);
            //Set the total box to the right price according to ad size
            $('input').each(function(index,data) {
                var value = $(this).val();
            });
        });

        $('.addRow').on('click', function() {
            $("#adsTable").append($adTableRow);
            firstRow = false;


            //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();

        });
                });

事前にご協力いただきありがとうございます

4

1 に答える 1

1

上記の私のコメントによると、ロジックを関数に入れ、新しい行を追加するたびにその関数を再初期化する必要があります。

function reInit(){
    $(".ad_size").on('change', function() {
        console.log('test');
        //Grab the value of the select box and store it in a variable
        var ad_cost = $(this).val();
        //Insert the value into the pricing box             
        $(this).parent().next().children().find('.addPrice').val(ad_cost);
        //Set the total box to the right price according to ad size
        $('input').each(function(index,data) {
            var value = $(this).val();
        });
    });
}

次に、次のように呼び出します。

$('.addRow').on('click', function() {
    $("#adsTable").append($adTableRow);
    firstRow = false;

    reInit();
    //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();

});

ここに作業フィドルがありますhttp://jsfiddle.net/QwnuR/2/

于 2013-08-26T14:31:32.413 に答える