Блог

Главная - Вопросы по программированию - Переключатель ползунка диапазона jQuery

Переключатель ползунка диапазона jQuery

#jquery

#jquery

Вопрос:

У меня есть 2 ползунка jQuery, и я хочу сделать что-то вроде этого:

 if 1st slider value = 5 and 2nd slider value = 10 then
    print some text
else if (other values) then
    print other text

Но это не работает ни с переключателем, ни с инструкцией if-else .

Мой HTML

 <div class="wrapper ui-widget-content">
    <div id="wo"></div>
    <div id="w" class="weight"></div>
    <p class="slider-title">Rider Weight</p>
    <div id="io"></div>
    <div id="inc" class="incline"></div>
    <p class="slider-title">Incline</p>
    <div id="m" class="miles"></div>
</div>

Мой JavaScript

 var weight = $('#w');
var incline = $('#inc');
var miles = $('#m');
$(function () {
  $(weight).slider({
    animate: "slow",
    max: 250,
    mix: 75,
    step: 25,
    range: 'min',
    change: function( event, ui ) {
      $('#wo').html(ui.value);
    }
  });

  $(incline).slider({
    animate: "slow",
    max: 20,
    mix: 0,
    step: 5,
    range: 'min',
    change: function( event, ui ) {
      $('#io').html(ui.value);
    }
  });

  switch (miles) {
    case $(weight).slider("value", 100) amp;amp; $(incline).slider("value", 15):
      $(miles).html("100 to 15");
      break;
      case $(weight).slider("value", 75) amp;amp; $(incline).slider("value", 5):
        $(miles).html("75 to 5");
    default:
      $(miles).html("nothing");
  }
});

Комментарии:

1. Это switch полное дерьмо, так как вы, вероятно, не понимаете, что такое switch четный. Я рекомендую вам использовать операторы if-else .

2. да, теперь я понял … else-если сработало для меня.

Ответ №1:

Во-первых, это не так, как switch работает. Здесь вам понадобится if / else if .

Во-вторых, $(weight).slider("value", 100) присваивается значение 100 ползунку.

Вместо этого вам нужен этот формат:

 weight.slider('value') == 100

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

Ответ №2:

  $(weight).slider({
   animate: "slow",
   max: 250,
   mix: 75,
   step: 25,
   range: 'min',
   change: function( event, ui ) {
     $('#wo').html(ui.value);
      showDisplay();
   }
 });

 $(incline).slider({
   animate: "slow",
   max: 20,
   mix: 0,
   step: 5,
   range: 'min',
   change: function( event, ui ) {
     $('#io').html(ui.value);
     showDisplay();
   }
 });

 function showDisplay(){
   switch (miles) {
     case $(weight).slider("value", 100) amp;amp; $(incline).slider("value", 15):
        $(miles).html("100 to 15");
      break;
    case $(weight).slider("value", 75) amp;amp; $(incline).slider("value", 5):
    $(miles).html("75 to 5");
     default:
     $(miles).html("nothing");
  }
}

попробуйте это.