0

假设我有一个像这样的jQuery UI Slider

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

假设我的滑块旁边有一个动态输入文本来显示滑块的值,如下所示:

<input id="slider-value" type="text" value="7" style="text-align: center;">

所以我的滑块的完整代码是:

<p>
<div id="slider-value" class="mySlider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<input id="slider-value" type="text" value="7" style="text-align: center;">
</p>

如您所见,最初,当页面加载时,我的滑块的值为 7。此外,显示滑块值的输入文本与滑块 div 本身具有相同的 id。我希望滑块的句柄在页面加载时显示该值。如果我将滑块的 value 属性设置为 7,如下所示:

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: 7, // value of the slider handle
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

这可以正常工作,但显然,这不是最好的方法,因为滑块的值是从数据库中检索的并且可能会更改(可能是 1、8、4、6 等...)。

现在,如果我尝试做类似的事情:

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

出于某种原因,这不起作用。句柄不显示值。我做错了什么?,是因为我不能在 $().slider({}) 中使用 $(this) 吗?

请让我知道为什么这不起作用

谢谢

4

3 回答 3

2

这是什么this?不要认为它会指向.mySlider因为您只是创建一个配置并将其作为参数发送给滑块插件,滑块尚未初始化。试试这个。

var $mySlider = $(".mySlider");
$mySlider.slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $mySlider.next('input').val(),
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

作为一个侧面而不是 ids 必须是唯一的页面。您可以使用val()方法从输入元素中获取值,而不是使用attr("value").

根据您的编辑(添加标记)编辑了我的答案。使用next()方法来查找直接输入(兄弟).mySlider并获取值。

更新:对于多个滑块使用此代码

$(".mySlider").each(function(){
    var $this = $(this);
    $this.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $this.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});
于 2012-02-15T15:30:15.010 回答
0

@ShankarSangoli 的回答确实解决了如何解决它,但我想你问为什么

要回答为什么this不引用滑块的问题,请查看您是如何构建该函数调用的。

$(".mySlider").slider({
    range: "min", 
    min: 0, 
    max: 10, 
    value: $(this).closest("p").find("input[id=" + $(this).attr("id") + "]").attr("value"), // setting the value of the slider handle dynamically
    slide: function(event, ui){
        // do stuff here on slide...
    }
});

但是让我们用更简单的东西替换名称和细节:

object.method({
    value: this.function().otherFunction()...;
});

这与

var params = {
    value: this.function().otherFunction()...;
};
object.method(params);

正如已经指出的那样,this不引用滑块对象,因此您需要首先创建对滑块的引用。 this最近的封闭范围——在这种情况下,它是您创建的匿名对象 {} 以传递.slider方法调用的参数。

希望有帮助。

于 2012-02-15T15:44:30.987 回答
0

基于@ShankarSangoli 帖子:

var $mySlider = $(".mySlider");
$mySlider.each(function() {
    var $slider = $(this);
    $slider.slider({
        range: "min", 
        min: 0, 
        max: 10, 
        value: $slider.next('input').val(),
        slide: function(event, ui){
            // do stuff here on slide...
        }
    });
});

您获取每个.mySlider并添加插件并将其存储为$slider获取其值。

于 2012-02-15T15:48:38.863 回答