Question

假设我有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）？

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

谢谢

Answer 1

这里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...
    }
});

作为一方，非ID必须是页面的唯一。您可以使用val()方法从input元素中获取值，而不是使用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...
        }
    });
});

Answer 2

@ 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方法调用的参数。

希望有所帮助。

Answer 3

基于@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以获取其值。

在$（）。slider（{}）中使用$（this）不能引用滑块？

3 个答案: