Jquery 滑块将标签字分配给值

发布于 2024-12-26 03:49:35 字数 923 浏览 2 评论 0原文

这有点像这里发布的问题：是或否切换或滑块 - 但我无法得到在这个例子中工作的解决方案。

我有一个水平增量范围滑块，我想对其进行修改，以便将标签解码为值 1 - 2 - 3 的小 - 中 - 大

我已经尝试粘贴一个数组来解码，但我无法将其解码正确工作。

这是我到目前为止所得到的：

    <script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 1,
                max: 3,
                step: 1,
                values: [ 2, 3 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
                " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });
    </script>

因此，如果选择位置 2 - 3（默认情况下），标签将显示为“中 - 大”。

任何帮助或指导将不胜感激！

谢谢

原文

This is a bit like the problem posted here: Yes or no toggle or slider - but i can't get the solution to work in this example.

I have a horizontal incremental range slider which i would like to modify so that the labels are decoded to small - medium - large for values 1 - 2 - 3

I've tried sticking an array to decode but i just can't get it to work right.

Here's what i have so far:

    <script>
        $(function() {
            $( "#slider-range" ).slider({
                range: true,
                min: 1,
                max: 3,
                step: 1,
                values: [ 2, 3 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            });
            $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
                " - " + $( "#slider-range" ).slider( "values", 1 ) );
        });
    </script>

so that if positions 2 - 3 were selected (as is the default), the label would read 'medium - large'.

Any help or direction would be much appreciated!

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

游魂 2025-01-02 03:49:35

这又如何呢？

它使用映射器对象而不是数组，但还包含一个返回字符串而不是您自己创建字符串的函数：

$(function() {

    // mapper    
    var valueMap = {
        1 : "small",
        2 : "medium",
        3 : "large",
        getText : function(arr) {
            return this[arr[0]] + " - " + this[arr[1]];
        }
    };

    // initial range slider values
    var initial = [2, 3];

    // initialize slider
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 3,
        step: 1,
        values: initial,
        slide: function( event, ui ) {
            $("#amount").val(valueMap.getText(ui.values));
        }
    });

    // initialize value display
    $("#amount").val(valueMap.getText(initial));

});

What about this?

It uses a mapper object instead of an array but also includes a function that returns a string instead of creating it yourself:

$(function() {

    // mapper    
    var valueMap = {
        1 : "small",
        2 : "medium",
        3 : "large",
        getText : function(arr) {
            return this[arr[0]] + " - " + this[arr[1]];
        }
    };

    // initial range slider values
    var initial = [2, 3];

    // initialize slider
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 3,
        step: 1,
        values: initial,
        slide: function( event, ui ) {
            $("#amount").val(valueMap.getText(ui.values));
        }
    });

    // initialize value display
    $("#amount").val(valueMap.getText(initial));

});

回复收藏 0 原文

~没有更多了~