Обновить текст на основе опции выбора, умноженной на стоимость билета

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>