Question

我正在尝试创建一个jqueryUI滑块，其中多个图像可用作句柄。

我需要一些帮助：

顶部可见手柄应首先滑动。
当我滑动两个滑块中的任何一个时，另一个滑块的初始值将在其框中设置。我希望仅在用户滑动相应滑块时设置该值。

这是我的javascript

$(function () {
    $("#sliderPointer").slider({ min: 0, max: 100, values: [50, 50]});

    $("#sliderImage").slider({ min: 0, max: 100, values: [50, 50],
        slide: function (event, ui) {
            $("#one").val(ui.values[0]);
            $("#two").val(ui.values[1]);
            $("#sliderPointer").slider("option", "values"
                                         , [ui.values[0], ui.values[1]]);
            for (var i = 0; i < ui.values.length; i++) {
                $("#pointer" + (i + 1)).text(ui.values[i]);
            }
        }
    });

    var indexPointer = 1;
    $("#sliderPointer a").each(function () {
        $(this).attr('id', 'pointer' + indexPointer);
        indexPointer++;
    });
    var indexImage = 1;
    $("#sliderImage a").each(function () {
        $(this).attr('id', 'image' + indexImage);
        indexImage++;
    });

    var i = 1;
    var $logos = $("img");
    $logos.each(function () {
        var src = $(this).attr("src");
        $("#image" + i).css("background", "url(" + src + ")");
        i++;
    });
});

Answer 1

<强>更新

嗯..这对你有用吗？

jQuery

$("#sliderImage").slider({
    min: 0,
    max: 100,
    values: [50, 50],
    slide: function (event, ui) {
        $("table").find('input').eq($(ui.handle).attr('id').substring(5)-1).val(ui.values[$(ui.handle).attr('id').substring(5)-1]);
        $("#sliderPointer").slider("option", "values", [ui.values[0], ui.values[1]]);
        $("#pointer" + ($(ui.handle).attr('id').substring(5))).text(ui.values[$(ui.handle).attr('id').substring(5)-1]);
    }
});

CSS

#image1 {
    z-index:300;
}

示例：

http://jsfiddle.net/trevordowdle/c934g/9/

jqueryUI多句柄和图像作为句柄滑块

1 个答案: