Question

我正在为电影院制作预订页面，并希望人们能够选择任何给定票证的金额，并根据所选票证的数量乘以该票价，更新小计HTML文本。票。

HTML

    <table id="tickets">
        <tr>
            <th class="first_column">Ticket Type</th>
            <th class="quantity_select">Quantity</th>
            <th class="column">Subtotal Price</th>
        </tr>
        <tr>
            <td class="first_column" name="SA">Adult</td>
            <td><select class="quantity_select">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                </select>
           </td>
           <td id="subtotal">$xx.xx</td>
        </tr>
        <tr>
            <td class="first_column" name="SP">Concession</td>
            <td><select class="quantity_select">
                <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>

                                <tr>
                                    <td class="first_column" name="SC">Child</td>
                                    <td><select class="quantity_select">
                                            <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="FA">First Class Adult</td>
                                    <td><select class="quantity_select">
                                            <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="FC">First Class Child</td>
                                    <td><select class="quantity_select">
                                            <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="B1">Beanbag - 1 Person</td>
                                    <td><select class="quantity_select">
                                            <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="B2">Beanbag - 2 People</td>
                                    <td><select class="quantity_select">
                                            <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td class="first_column" name="B3">Beanbag - 3 Children</td>
                                    <td><select class="quantity_select">
                                            <option value="0">-</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select></td>
                                    <td>$xx.xx</td>
                                </tr>
                                <tr>
                                    <td id="total price">Total Price: </td>
                                    <td id="line_total">$xx.xx</td>
                                </tr>

以下是门票价格（来自我的网页的截图）我需要用什么jQuery来实现这个目标？请注意票价的例外情况

Answer 1

老实说，这类问题并不适合SO。当一个人来到这里寻求帮助时，我们通常希望他们已经合理地尝试自己编写代码但遇到了他们无法解决的特定问题。

我们还希望提问者能够显示他们遇到问题的实际代码，并能够清楚地表达他们的代码的预期结果，以及描述他们当前的尝试如何不能满足期望。

话虽如此，我今晚需要休息所以请看下面的内容，它应该完全符合你的需要。查看代码，如果您对某些工作有何疑问，请随时提出：

$('.update-cost').change(function(){
    
    // define come data to work with 
    var discountedDays = ['Mon','Tues']; // remember to update this if your values are different
    var discountedTimes = ['1 pm']; // remember to update this if your values are different
    var totalCost = 0;
    var costType='regular';
    var priceList={ 
                  adult:{ regular : '18.00', discounted: '12.00' },
             consession:{ regular : '15.00', discounted: '10.00' },
                  child:{ regular : '12.00', discounted: '8.00' },
        firstClassAdult:{ regular : '30.00', discounted: '25.00' },
        firstClassChild:{ regular : '25.00', discounted: '20.00' },
                beanbag:{ regular : '18.00', discounted: '12.00' }
    };
    
   // get day and time 
   var day= $('#session-day').val();
   var time= $('#session-time').val();
    
   // check if discount applies 
   if($.inArray(day,discountedDays)!=-1 || $.inArray(time,discountedTimes)!=-1 ){
       costType='discounted';
   }

    // loop through each row subtotal
   $('.subtotal').each(function(i,e){
       var $select = $(e).closest('tr').find('[data-purchase-type]');
       var purchaseType = $select.data('purchase-type');
       var quantity = $select.val();
       var purchasePrice = parseFloat(priceList[purchaseType][costType]) * 1000; // if you're currious why this math seems unnecessarily complex, see http://stackoverflow.com/questions/588004/is-floating-point-math-broken
       var purchaseTotal = quantity * purchasePrice;
       $(e).text('$'+(purchaseTotal / 1000).toFixed('2'));
       totalCost = totalCost + purchaseTotal;       
   });
    
   // set grand total
   $('#total_price').text('$'+(totalCost / 1000).toFixed('2')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="session-day" class="update-cost">
    <option value="Mon">Mon</option>
    <option value="Tues">Tues</option>
    <option value="Wed">Wed</option>
    <option value="Thur">Thur</option>
    <option value="Fri">Fri</option>
    <option value="Sat">Sat</option>
    <option value="Sun">Sun</option>
</select>
<select id="session-time"  class="update-cost">
    <option value="11 am">11 am</option>
    <option value="12 pm">12 pm</option>
    <option value="1 pm">1 pm</option>
    <option value="2 pm">2 pm</option>
    <option value="3 pm">3 pm</option>
    <option value="4 pm">4 pm</option>
    <option value="5 pm">5 pm</option>
</select>
<table id="tickets">
    <tr>
        <th class="first_column">Ticket Type</th>
        <th class="quantity_select">Quantity</th>
        <th class="column">Subtotal Price</th>
    </tr>
    <tr>
        <td class="first_column" name="SA">Adult</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="adult">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="SP">Concession</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="consession">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="SC">Child</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="child">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="FA">First Class Adult</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="firstClassAdult">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="FC">First Class Child</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="firstClassChild">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="B1">Beanbag - 1 Person</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="beanbag">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="B2">Beanbag - 2 People</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="beanbag">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td class="first_column" name="B3">Beanbag - 3 Children</td>
        <td>
            <select class="quantity_select update-cost" data-purchase-type="beanbag">
                <option value="0">-</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </td>
        <td class="subtotal">$xx.xx</td>
    </tr>
    <tr>
        <td>Total Price:</td>
        <td id="total_price">$xx.xx</td>
    </tr>

根据选择选项更新文本，再加上票价

1 个答案: