Javascript 无法访问函数内部的元素

我无法让jquery访问事件函数内部的元素：

JSFiddle：

在页面加载时，在document.ready中，您可以看到滑块转到10。但是，在切换开关上，什么也不会发生，它应该变为1

JS:

HTML:

在…上
关

在调用

滑块

功能之前，您需要委托

更改

事件（而不是

滑块

）

 $(document).ready(function() {

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

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

---

工作示例：

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

如果您想使用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);
   });
 });

在…上
关
$（文档）.ready（函数（）{
$（“.dimmerSliderDiv”）.滑块({
“价值”：10
})$（“.dimmersliderput”）.val（10）；
$（'.toggle'）。打开（“更改”，函数（）{
$（.dimmerSlidedDiv”）.slider（“选项”、“值”），（$（this.val（）=“关闭”）？0:15）；
$（“.dimmerSliderInput”）.val（（$（this.val（）==“OFF”）？0:15）；
});
});

---

如果您计划使用范围输入，您将使用val方法来设置值。

这似乎不适用于jquery mobile…一旦我将jquery mobile文件添加回其中，它就停止工作，我使用的是1.4.5。问题看起来与我在其他地方的代码类似，它在jfiddle中工作。谢谢

 $(document).ready(function() {

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

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

<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);
   });
 });