Question

我尝试基于jQuery滑块创建高级搜索引擎。

    $(document).ready(function() {
    $("#slider_powcalk").slider({
        range:true,
        min: 0,
        max: 1000,
        step: 5,
        values: [100, 900],
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.slider_powcalk_Value[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });

    $("input.slider_powcalk_Value").change(function() {
        var $this = $(this);
        $("#slider_powcalk").slider("values", $this.data("index"), $this.val());
    });
});

我想在单页上运行多个滑块，每个宽度两个值（输入）如何运行第二个滑块以保持清晰的代码（我不想复制所有代码并仅更改类）

感谢您的帮助

Answer 1

请注意，您的示例会复制ID（必须是唯一的），但这不会导致代码出现任何问题。

要做你想做的事，试试：

$(document).ready(function () {
    $("#slider_powcalk, #slider_sso").each(function () {
        var value = parseInt($(this).text(), 10);
        $(this).empty().slider({
            range: true,
            min: 0,
            max: 1000,
            step: 5,
            values: [100, 900],
            slide: function (event, ui) {
                for (var i = 0; i < ui.values.length; ++i) {
                    $(this).parent().find("input[data-index=" + i + "]").val(ui.values[i]);
                }
            }
        });
    });
    $("input.slider_powcalk_Value").change(function () {
        var $this = $(this);
        $("#slider_powcalk").slider("values", $this.data("index"), $this.val());
    });
});

<强> jsFiddle example

我在滑块实例化中添加了#slider_sso以获取$("#slider_powcalk, #slider_sso").slider({并将幻灯片事件中的值更新为$(this).parent().find("input[data-index=" + i + "]")。

Jquery Slider UL - 多个过滤器

1 个答案: