Question

我已经实现了UI Jquery滑块http://jqueryui.com/slider/#steps，它运行得非常好。但是知道我想要做的是在点击一些链接时使滑块移动。

但我收到错误：未捕获的ReferenceError：分配中的左侧无效 slider.html：88 （匿名函数） < / p>

所以这是我的代码：

<script>

    $(function() {
        $( "#slider" ).slider({
            range: "min",
            value:0,
            min: 0,
            max: 200,
            step: 50,

            create: function( event, ui ) {
                $("#packs a").css("color", "#336799");
                $("#packs .pack1").css("color", "#b84a00");
            },
            slide: function( event, ui ) {

                switch(ui.value) {
                    case 0:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack1").css("color", "#b84a00");
                        break;
                    case 50:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack2").css("color", "#b84a00");
                        break;
                    case 100:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack3").css("color", "#b84a00");
                        break;
                    case 150:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack4").css("color", "#b84a00");
                        break;
                    case 200:
                        $("#packs a").css("color", "#336799");
                        $("#packs .pack5").css("color", "#b84a00");
                        break;
                    default:
                        $("#packs a").css("color", "#336799");
                }
            }
        });
    });
</script>

<div id="offers">
    <div id="slider">
        <div class="marker" style="left: 124.25px;"></div>
        <div class="marker" style="left: 248.5px;"></div>
        <div class="marker" style="left: 372.75px;"></div>
        <div class="handler"></div>
    </div>

    <div id="packs">
        <a class="pack1" href="javascript:;">Pack1</a>
        <a class="pack2" href="javascript:;">Pack2</a>
        <a class="pack3" href="javascript:;">Pack3</a>
        <a class="pack4" href="javascript:;">Pack4</a>
        <a class="pack5" href="javascript:;">Pack5</a>
    </div>
</div>

<script type="text/javascript">
    $(".pack1").click(function() {
        $("#slider").slider("value") = 0; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack2").click(function() {
        $("#slider").slider("value") = 50; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack3").click(function() {
        $("#slider").slider("value") = 100; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack4").click(function() {
        $("#slider").slider("value") = 150; // ERROR
        $("#slider").slider("slide");
    });
    $(".pack5").click(function() {
        $("#slider").slider("value") = 200; // ERROR
        $("#slider").slider("slide");
    });
</script>

我发现错误与此行有关：$("#slider").slider("value") = Something

你有没有想过这个？

谢谢。

Answer 1

设置滑块值的正确方法是：

$( ".selector" ).slider({ value: 10 });

请参阅http://api.jqueryui.com/slider/#option-value

Answer 2

您收到错误是因为您试图为函数的结果赋值，这是不允许的。

要在初始化后设置滑块的值，请执行以下操作：

// getter
var value = $( ".selector" ).slider( "option", "value" ); 

// setter
$( ".selector" ).slider( "option", "value", 10 );

请参阅the documentation：

Answer 3

以下是固定代码：

$(".pack1").click(function() {
    $("#slider").slider({ value: 0 });
    $("#slider").slider("slide");
});
$(".pack2").click(function() {
    $("#slider").slider({ value: 50 }); //Fixed

    $("#slider").slider("slide");
});
$(".pack3").click(function() {
    $("#slider").slider({ value: 100 }); //Fixed
    $("#slider").slider("slide");
});
$(".pack4").click(function() {
    $("#slider").slider({ value: 150 }); //Fixed
    $("#slider").slider("slide");
});
$(".pack5").click(function() {
    $("#slider").slider({ value: 200 }); //Fixed
    $("#slider").slider("slide");
});

检查jsfiddle是否有工作代码： http://jsfiddle.net/sandeep605085/snWmk/

查看JQuery文档： http://api.jqueryui.com/slider/#option-value

Thanks,
Sandeep

未捕获的ReferenceError：赋值中的左侧无效（匿名函数）

3 个答案: