Question

我无法获取jquery来访问事件函数内的元素：

的jsfiddle： https://jsfiddle.net/w3zv5t0s/2/

在页面加载时，在document.ready中你可以看到滑块转到10.然而，在切换开关上没有任何反应，它应该转到1.

JS：

jsfiddle

HTML：

$(document).ready(function() {

   //WORKS HERE
   $(".dimmerSlider").val(10).slider("refresh");

   $('.toggle').on("slidestop", function() {

    //NOT HERE
        $(".dimmerSlider").val(1).slider("refresh");

   });

 });

Answer 1

在调用change函数之前，您需要委派slidestop事件（而不是slider）。

 $(document).ready(function() {

    $('.toggle').on("change", function() {
      $(".dimmerSlider").val(1).slider("refresh");    
   });

   $(".dimmerSlider").val(10).slider("refresh");
 });

工作示例：https://jsfiddle.net/DinoMyte/w3zv5t0s/3/

Answer 2

看起来你正在使用带有jQueryUI滑块的范围输入。

如果你想使用滑块小部件，根据http://api.jqueryui.com/slider/的文档，你可能会使用div并使用设置值的选项对其进行实例化。然后，您可以使用滑块调用进行进一步更新。请务必在页面中包含jQuery UI代码。

<select class='toggle' id='3' data-role='slider' data-itemID='3'>
  <option value='ON'>On</option>
  <option value='OFF' selected='selected'>Off</option>
</select>

<div class='dimmerSliderDiv'></div>

<input class='dimmerSliderInput' type='range' id='3' value='15' min='0' max='15' step='1' data-highlight='true' data-itemID='sl3' />

 $(document).ready(function() {
 $(".dimmerSliderDiv").slider({
   "value": 10
 }); $(".dimmerSliderInput").val(10);
   $('.toggle').on("change", function() {
       $(".dimmerSliderDiv").slider("option", "value", ($(this).val() === "OFF") ? 0 : 15);
       $(".dimmerSliderInput").val(($(this).val() === "OFF") ? 0 : 15);
   });
 });

如果您打算使用范围输入，则可以使用 val 方法设置值。

无法访问函数内部的元素

2 个答案: