Расчет стоимости на jquery

136

29 ноября 2020, 11:10

Данный калькулятор рассчитывает цену проката авто в зависимости от сезона, на каждый из 3 сезонов задано 5 разных цен. Мне нужно усложнить его, добавив еще и 3 разных авто, чтоб на каждый автомобиль на каждый сезон была своя цена. Подскажите, пожалуйста, как правильно это сделать? Все, где есть id="type-auto", уже добавлено к исходному коду мной, а вот заставить работать и добавить еще один уровень вложенности никак не получается. Опыта не хватает. Большое спасибо за помощь!

<form> 
  <div class="form-group"> 
 
    <label for="type-auto">Auto</label> 
    <select class="form-control" id="type-auto"> 
      <option value="0">Выберите сезон</option> 
      <option value="1">KIA</option> 
      <option value="2">Ford</option> 
      <option value="3">Opel</option> 
    </select> 
  </div> 
 
  <div class="form-group"> 
 
    <label for="type-direction">Сезон</label> 
    <select class="form-control" id="type-direction"> 
      <option value="0">Выберите сезон 
      </option> 
      <option value="1">03/01 - 09/04; 16/10-20-12 
      </option> 
      <option value="2">10/04 - 09/06; 15/09 – 15/10 
      </option> 
      <option value="3">10/06 -14/09; 21/12 – 03/01 
      </option> 
    </select> 
  </div> 
  <div class="form-group"> 
    <label for="number-sessions">Количество дней</label> 
    <select class="form-control" id="number-sessions"> 
      <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> 
    </select> 
  </div> 
  <div class="form-group"> 
    <label for="total-price">Итоговая цена</label> 
    <input type="text" class="form-control" id="total-price"> 
  </div> 
</form>

  var $auto = $('#type-auto') 
       ,$dir = $('#type-direction') 
       ,$num = $('#number-sessions') 
       ,$tot = $('#total-price') 
       ,prices = { 
       // номер_сезона: { номер_кол-ва дней: цена, } 
        1: { 1: 30, 2: 45, 3: 60, 4: 75, 5: 90 }, 
         2: { 1: 35, 2: 50, 3: 65, 4: 80, 5: 95 }, 
         3: { 1: 40, 2: 55, 3: 70, 4: 85, 5: 100 } 
       }; 
     
    function update() { 
      var auto = $auto.val(); // значение авто 
      var dir = $dir.val(); // значение сезона 
      var num = $num.val(); // значение кол-ва дней 
      $tot.val( prices[dir]  &&  prices[dir][num]); 
      
    } 
     
    // слушать события обновления значений 
    $auto.on('change', update); 
    $dir.on('change', update); 
    $num.on('change', update);

Answer 1

На самом деле все просто. Объект prices надо расширить для значений машин, и в выводе цены добавить наши авто. Для наглядности, к ценам вперед я добавил номер авто.

var $auto = $('#type-auto'), 
    $dir = $('#type-direction'), 
    $num = $('#number-sessions'), 
    $tot = $('#total-price'), 
    prices = { 
        1: { // kia 
            // номер_сезона: { номер_кол-ва дней: цена, } 
            1: {1: 130, 2: 145, 3: 160, 4: 175, 5: 190}, 
            2: {1: 135, 2: 150, 3: 165, 4: 180, 5: 195}, 
            3: {1: 140, 2: 155, 3: 170, 4: 185, 5: 1100} 
        }, 
        2: {//ford 
            // номер_сезона: { номер_кол-ва дней: цена, } 
            1: {1: 230, 2: 245, 3: 260, 4: 275, 5: 290}, 
            2: {1: 235, 2: 250, 3: 265, 4: 280, 5: 295}, 
            3: {1: 240, 2: 255, 3: 270, 4: 285, 5: 2100} 
        }, 
        3: {//opel 
            // номер_сезона: { номер_кол-ва дней: цена, } 
            1: {1: 330, 2: 345, 3: 360, 4: 375, 5: 390}, 
            2: {1: 335, 2: 350, 3: 365, 4: 380, 5: 395}, 
            3: {1: 340, 2: 355, 3: 370, 4: 385, 5: 3100} 
        }, 
    }; 
 
 
function update() { 
    var auto = $auto.val(); // значение авто 
    var dir = $dir.val(); // значение сезона 
    var num = $num.val(); // значение кол-ва дней 
    $tot.val(prices[auto] && prices[auto][dir] && prices[auto][dir][num]); 
 
} 
 
// слушать события обновления значений 
$auto.on('change', update); 
$dir.on('change', update); 
$num.on('change', update);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form> 
  <div class="form-group"> 
 
    <label for="type-auto">Auto</label> 
    <select class="form-control" id="type-auto"> 
      <option value="0">Выберите сезон</option> 
      <option value="1">KIA</option> 
      <option value="2">Ford</option> 
      <option value="3">Opel</option> 
    </select> 
  </div> 
 
  <div class="form-group"> 
 
    <label for="type-direction">Сезон</label> 
    <select class="form-control" id="type-direction"> 
      <option value="0">Выберите сезон 
      </option> 
      <option value="1">03/01 - 09/04; 16/10-20-12 
      </option> 
      <option value="2">10/04 - 09/06; 15/09 – 15/10 
      </option> 
      <option value="3">10/06 -14/09; 21/12 – 03/01 
      </option> 
    </select> 
  </div> 
  <div class="form-group"> 
    <label for="number-sessions">Количество дней</label> 
    <select class="form-control" id="number-sessions"> 
      <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> 
    </select> 
  </div> 
  <div class="form-group"> 
    <label for="total-price">Итоговая цена</label> 
    <input type="text" class="form-control" id="total-price"> 
  </div> 
</form>