Вычисление локальных значений при запуске функции слайдера - PullRequest
Новая
       39

Вычисление локальных значений при запуске функции слайдера

0 голосов
/ 14 ноября 2018

Я добавляю несколько переменных в три разных ползунка.

Два ползунка выбирают количество яблок и апельсинов. Эти ползунки умножают значения из другого ползунка (ползунок клиента).

Когда я вытягиваю ползунки апельсинов и яблок, они получают значение из ползунка клиента для умножения, но ползунок покупателя не будет обновлять значения в двух других ползунках.

Я хочу, чтобы значения вычислялись, когда я также нажимал на ползунок клиента. 

var customers;

$('.input-1').bind('input', mainfunction);
$('.input-2').bind('input', mainfunction);
$('.customers').bind('input', customersfunction);

function mainfunction() {
  var this_value = this.value;
  var price = $(this).data("price");
  var this_sum = this_value * price * customers;

  $(this).closest("div").find(".counter").html(this_value);
  $(this).closest("div").find(".sum").html(this_sum);
}

function customersfunction() {
  customers = this.value;
  $(this).closest("div").find(".counter").html(customers);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Apples: 5$</p>
<div>
  <input class="input-1" data-price="5" type="range" value="0" min="0" max="10">
  <span class="counter">0</span><br>
  <span class="sum">0</span>
</div>

<p>Oranges: 3$</p>
<div>
  <input class="input-1" data-price="3" type="range" value="0" min="0" max="10">
  <span class="counter">0</span><br>
  <span class="sum">0</span>
</div>

<p>Customers:</p>
<div>
  <input class="customers" type="range" value="0" min="0" max="10">
  <span class="counter">0</span><br>
</div>

Моя скрипка: http://jsfiddle.net/5vnrd6zx/26/

1 Ответ

0 голосов
/ 14 ноября 2018

Проблема в том, что вы обновляете .counter и .sum только тогда, когда вызывается mainfunction, изменяя слайдер с фруктами. Это также необходимо делать, когда значение клиентов также меняется, так как количество клиентов, использованных в этом расчете, изменилось.

Как таковой, имеет смысл написать общую функцию, которая обрабатывает событие input всех ползунков и показывает соответствующее количество и сумму для каждого из них. Примерно так: 

var $sliders = $('.slider').on('input', function() {
  $sliders.each(function() {
    var $slider = $(this);
    var amount = $slider.val();
    
    var $container = $slider.closest('div');
    $container.find('.counter').text(amount);

    if ($slider.hasClass('fruit')) {
      var price = $slider.data('price');
      $container.find('.sum').text(amount * price * $customers.val());
    }
  });
});

var $customers = $sliders.filter('.customers');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Apples: 5$</p>
<div>
  <input class="slider fruit" data-price="5" type="range" value="0" min="0" max="10">
  <span class="counter">0</span><br>
  <span class="sum">0</span>
</div>

<p>Oranges: 3$</p>
<div>
  <input class="slider fruit" data-price="3" type="range" value="0" min="0" max="10">
  <span class="counter">0</span><br>
  <span class="sum">0</span>
</div>

<p>Customers:</p>
<div>
  <input class="slider customers" type="range" value="0" min="0" max="10">
  <span class="counter">0</span><br>
</div>

Обратите внимание на использование общих классов на ползунках, чтобы помочь обобщить логику, а также цикл, который проходит и обновляет их все, когда любое из их значений было изменено.

...