одна функция для ползунков с несколькими диапазонами - PullRequest
Новая
       36

одна функция для ползунков с несколькими диапазонами

1 голос
/ 24 февраля 2020

У меня есть страница с несколькими ползунками диапазона. Я хотел бы контролировать вывод на основе значения. Есть ли возможность заставить эту функцию работать для нескольких слайдеров на одной странице? или мне нужно переписать функцию заново с новыми идентификаторами для каждого входа?

Код: 

$(".slider").mousemove(function () {
  if ($(this).val()==this.min) {
    $(".priceOutputId").text("Less than $80")
  }
  else if ($(this).val()==this.max) {
    $(".priceOutputId").text("More than $100")
  }
  else {
    $(".priceOutputId").text("around $" + $(this).val())
  }
}

)
<label class="radio_title">
  <input type="range" min="80" max="100" value="80" class="slider" id="priceInputId">
  <div class="range_output">
    <output name="priceOutputName" class="priceOutputId">Less Than $80</output>
  </div>
</label>

<label class="radio_title">
  <input type="range" min="80" max="100" value="80" class="slider" id="priceInputId">
  <div class="range_output">
    <output name="priceOutputName" class="priceOutputId">Less Than $80</output>
  </div>
</label>

1 Ответ

1 голос
/ 24 февраля 2020

Чтобы выходные данные относились только к элементу, вызвавшему событие, вам нужно привязать logi c к ссылке this. Оттуда вы можете использовать jQuery методы обхода DOM, такие как closest() и find(), чтобы получить соответствующие элементы и обновить их.

Также обратите внимание, что вы не можете использовать один и тот же атрибут id несколько раз. Они должны быть уникальными. Если вы хотите сгруппировать элементы по поведению, используйте class. Кроме того, событие input больше подходит для элемента управления ползунка диапазона, поскольку оно также работает при изменении значения элементов управления с помощью клавиатуры.

После всего сказанного попробуйте это: 

$(".slider").on('input', function() {
  let $label = $(this).closest('label');  
  let $output = $label.find('.priceOutput');

  if (this.value == this.min) {
    $output.text("Less than $80")
  } else if (this.value == this.max) {
    $output.text("More than $100")
  } else {
    $output.text("around $" + this.value)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="radio_title">
  <input type="range" min="80" max="100" value="80" class="slider priceInput">
  <div class="range_output">
    <output name="priceOutputName" class="priceOutput">Less Than $80</output>
  </div>
</label>

<label class="radio_title">
  <input type="range" min="80" max="100" value="80" class="slider priceInputId">
  <div class="range_output">
    <output name="priceOutputName" class="priceOutput">Less Than $80</output>
  </div>
</label>

Также обратите внимание, что условие if можно сократить, используя следующую троичную форму. Я оставлю на ваше усмотрение, предпочитаете ли вы краткость простоте чтения: 

let output = this.value === this.min ? 'Less than $80' : this.value === this.max ? 'More than $100' : 'Around $' + this.value;
$output.text(output);
...