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 回答