0

我已经实现了 UI Jquery 滑块http://jqueryui.com/slider/#steps并且效果很好。但是知道我想要做的是在单击某些链接时使滑块移动。

但我收到错误：未捕获的ReferenceError: Invalid left-hand side in assignment slider.html:88 (anonymous function)

所以这是我的代码：

<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

请问您对此有什么想法吗？

谢谢你。

4

3 回答 3

3

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

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

见http://api.jqueryui.com/slider/#option-value

于 2013-09-18T17:36:56.057 回答
1

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

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

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

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

请参阅文档：

于 2013-09-18T17:37:17.930 回答
0

下面是固定代码：

$(".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
于 2013-09-18T18:07:53.020 回答