Question

我使用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>

它应该以下列方式工作：

如果触摸了switcher1，则应将slider1值设置为0或255;
如果slider1值改变了，那么（a）如果它是= 0，那么切换器1应该设置为0，（b）否则切换器1的值应该设置为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

它应该以下列方式工作：


如果触摸了switcher1，则应将slider1值设置为0或255;

如果slider1值改变，则（a）如果= 0，则切换器1应设置为0，（b）否则切换器1的值应设置为255.

我尝试使用更改事件（切换器1更改（）使用相同）：

您有两个非常不同的更改每个控件的标准这一事实应该会让您知道更改事件处理程序也应该是不同的。使用相同的处理程序会导致您遇到的无限循环。以下代码说明了您提供的严格更改条件。请注意，如果需要更改（根据您的条件），则不会调用每个时间，则slider1更改处理程序会更改switcher1 。另请注意，在slider1更改处理程序中，{<1}}在调用刷新之前设置为，以便万一。switcher1_val 调用更改处理程序，更改处理程序不会执行任何操作，因为slider('refresh')已更新。

switcher1_val

See the live example.

希望这有帮助。

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

如何同步滑块的值？

1 个答案: