Как синхронизировать значения слайдеров? - PullRequest
Новая
       6

Как синхронизировать значения слайдеров?

0 голосов
/ 24 сентября 2011

Я использую мобильные слайдеры jquery: 

  <div data-role="fieldcontain">
    <input type="range" name="slider1" id="slider1" value="0" min="0" max="255"  />
  </div><br><br>
  <div data-role="fieldcontain">
    <select name="switcher1" id="switcher1" data-role="slider">
      <option value="0">Off</option>
      <option value="255">On</option>
    </select> 
  </div>

Должно работать следующим образом:

  1. при касании switcher1 значение slider1 должно быть установлено на 0 или 255;
  2. если значение slider1 изменяется, то (a) если оно = 0, тогда switcher1 должен быть установлен в 0, (b) иначе значение switcher1 должно быть установлено в 255.

Я пытался сделать это с событием change (то же самое используется для switcher1 change()): 

var slider1_val = "0";
$('#slider1').change(function () {
    sVal = $(this).val();
    if (slider1_val !== sVal) {
        $("#slider1").val(sVal).slider("refresh");
        if (sVal == 0) {
            $("#switcher1").val(0).slider("refresh");
        } else {
            $("#switcher1").val(255).slider("refresh");
        }
        slider1_val = sVal;
    }
});

Но похоже, что каждый вызов refresh вызывает change событие, поэтому я получаю бесконечный цикл.

1 Ответ

1 голос
/ 25 сентября 2011

Должно работать следующим образом:

  1. при касании switcher1 значение slider1 должно быть установлено на 0 или на 255;
  2. если значение slider1 изменяется, то (a) если оно = 0, тогда switcher1 должен быть установлен в 0, (b) иначе значение switcher1 должно быть установлено в 255.

Я пытался сделать это с событием изменения (то же самое используется для переключения switcher1 ()):

Тот факт, что у вас есть два совершенно разных критерия для изменения каждого элемента управления, должен указывать на то, что обработчики событий изменения также должны быть разными. Использование тех же обработчиков ведет к бесконечному циклу, который вы испытываете. Приведенный ниже код учитывает строгие критерии изменения, которые вы указали. Обратите внимание, что обработчик изменения slider1 меняет switcher1 только , если его необходимо изменить (в зависимости от ваших критериев), а не каждый раз, когда он вызывается. Также обратите внимание, что в обработчике изменений slider1 switcher1_val устанавливается до вызова обновления, так что в случае, если slider('refresh') вызывает обработчик изменений, обработчик изменений не сделать что-нибудь, потому что switcher1_val уже обновлен. 

var linkSliders = function(sliderId, switcherId){
    var slider = $('#'+sliderId),
        switcher = $('#'+switcherId);
    var min = Math.min(switcher[0].options[0].value, switcher[0].options[1].value),
        max = Math.max(switcher[0].options[0].value, switcher[0].options[1].value);
    var sliderVal = switcherVal = min;

    // set the slider min/max to be the same as the switcher's, just in case they're different
    slider.attr('max', max).attr('min', min).slider('refresh');  
    slider.change(function(){
        var sVal = $(this).val();
        if(sliderVal != sVal){
            if( sVal == min && switcherVal!=min){
                switcherVal=min;
                switcher.val(min).slider('refresh');
            }else if(sVal>min && switcherVal!=max){
                switcherVal=max;
                switcher.val(max).slider('refresh');
            }
            sliderVal = sVal;
        }
    });  

    switcher.change(function(){
        var sVal = $(this).val();
        if(switcherVal != sVal){
            slider.val(sVal).slider('refresh');
            switcherVal = sVal;
        }
    });
};

linkSliders('slider1','switcher1');

Смотрите живой пример.

Надеюсь, это поможет.

Обновление: по запросу, пример был изменен, чтобы сделать его более общим.

...