Jquery滑块UL-多个过滤器

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

$（文档）.ready（函数（）{
$（“#slider_powcalk”）.滑块({
范围：对，
分:0,，
最高：1000，
步骤：5，
值：[100900]，
幻灯片：功能（事件、用户界面）{
对于（变量i=0；i

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

---

感谢您的帮助

请注意，您的示例复制了ID（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());
    });
});

$（文档）.ready（函数（）{
$（“#slider_powcalk，#slider_sso”）。每个（函数（）{
var value=parseInt（$（this）.text（），10）；
$（this）.empty（）滑块({
范围：对，
分:0,，
最高：1000，
步骤：5，
值：[100900]，
幻灯片：功能（事件、用户界面）{
对于（变量i=0；i

---

我将

#slider_sso

添加到您的滑块实例化中，以获得

$（“#slider_powcalk，#slider_sso”）.slider（{

并将滑块事件中的值更新为

$（this.parent（）.find）（“输入[data index=“+I+”]））

有一个问题。当我移动第一个滑块，然后移动第二个滑块，然后再次重新旋转时，第一个滑块从第二个滑块获取值。您有什么解决方案吗？

$(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());
    });
});