javascript - 为 jQuery 滑块设置默认值并在需要时覆盖

Question

背景：我目前在我的 .js 文件中的网站上有一个可用的jQuery滑块

$( "#slider-range-min" ).slider({
      range: "min",
      value: 100,
      min: 1,
      max: 100,
    });

有时我需要能够将“值”从 100 覆盖到其他值。所以我尝试了这个：

$( "#slider-range-min" ).slider({
      range: "min",
      value: _Slider_Value,
      min: 1,
      max: 100,
    });

并在我的 html 页面上定义了这个

<script type="text/javascript">  
    var _Slider_Value = 50;
</script>

这也有效！除了在所有其他页面上，我收到一个 JavaScript 错误，指出“_Slider_Value 未定义”。如果可以避免的话，我宁愿不必将值复制并粘贴到我的所有页面上……这似乎不是一种“好”的方法吗？

问题：有没有更好的方法来做到这一点 - 所以我可以为我的滑块设置一个默认值，但偶尔会在需要时覆盖它？

编辑：另一种说法：除非我在我的 html 页面中另有说明，否则如何使我的滑块默认为“100”？

score 2 · Accepted Answer

2

在每个页面中包含的 js 文件中定义它

于 2012-05-16T09:16:15.380 回答

score 2 · Accepted Answer

将 aspan在您的 html 中，您在div容器中有滑块的位置是 ( id="slider-range-min")

<span class="min">100</span>

在滑块函数中读取此值

$( "#slider-range-min" ).slider({
      range: "min",
      value: $(this).find('.min').text();,
      min: 1,
      max: 100,
    });

如果您需要在页面上更新值，则动态更改跨度值，否则它将采用默认值，例如。100 在这里。

score 2 · Accepted Answer

如果您试图最小化变量，您可以随时检查

if (_Slider_Value != undefined) {
    //your code here
}

或者

(_Slider_Value != undefined) ? _Slider_Value : 100;

所以你的最终代码可以是

$( "#slider-range-min" ).slider({
  range: "min",
  value: (_Slider_Value != undefined) ? _Slider_Value : 100,
  min: 1,
  max: 100,
});

如果 _Slider_Value 中没有值，则默认为 100

score 1 · Accepted Answer

全局声明您的变量以在网页的任何位置访问它。这是教程链接。

尝试声明没有 var 关键字的变量以使其成为全局变量

<script type="text/javascript">  
    _Slider_Value = 50;
</script>

如果这不起作用，请尝试将变量绑定到窗口对象

var myValue;
function setValue()
{
    myValue = "test";
}

function getValue()
{
    alert(window.myValue); // yup, it's "test"
}

这是完整的解释，我从中给出了例子。

希望它有效（实际上没有尝试过）

score 1 · Accepted Answer

1

您可以使用此字符串覆盖滑块的选项。$('#slider-range-min').slider({value: 50});

于 2012-05-16T08:47:59.410 回答

5 回答 5