如何同步滑块？价值观？

Question

我使用 jquery mobile sliders：

  <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事件，所以我变得无限 环形。

Answer 1

它应该按以下方式工作：

1. 如果 switcher1 被触摸，则 slider1 值应设置为 0 或 255；
2. 如果 slider1 值发生更改，则 (a) 如果它 = 0，则 switcher1 应设置为 0，(b) 否则 switcher1 值应设置为 255。

我尝试使用更改事件来执行此操作（同样用于 switcher1 change()）：

事实上，您有两个非常不同的标准来更改每个控件，这应该提示您更改事件处理程序也应该不同。使用相同的处理程序会导致您遇到的无限循环。下面的代码考虑了您提供的严格更改标准。请注意，slider1 更改处理程序仅在需要更改时更改 switcher1（根据您的条件），而不是每次调用它时。另请注意，在 slider1 更改处理程序中，在调用刷新之前设置 switcher1_val，以便在 .slider('refresh') < em>确实调用更改处理程序，更改处理程序不会执行任何操作，因为 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');

查看实例。

希望这会有所帮助。

---

更新：根据要求，该示例已被修改以使其更加通用。