Question

我正在使用多个jquery滑块，我希望能够为Slide事件使用一个函数。我无法弄清楚如何获取调用Slide事件的滑块的ID。

在我的SliderDisplay（）函数中，我需要找到哪个滑块调用该函数，以便我可以相应地更新文本。这可能吗？

谢谢，苏珊

Answer 1

从正在使用的滑块的上下文中调用回调函数，因此您可以使用'this'变量来访问它的id：

var id = $(this).attr("id");

在链接的测试代码中，使用以下内容：

function SliderDisplay(event, ui) {
    $("#price-Powergarage").val($(this).attr("id"));
}

要使您的示例应用程序得出结论，请为每个滑块div添加一个附加属性，如下所示：

<强> HTML

<label for="price-Powergarage">Garage Spaces:</label>
<input type="text" id="price-Powergarage"/>
<div id="slider-Powergarage" rel="#price-Powergarage"></div>

<label for="price-Powerdoor">Garage Doors:</label>
<input type="text" id="price-Powerdoor"/>
<div id="slider-Powerdoor" rel="#price-Powerdoor"></div>

<强>的Javascript

$("#slider-Powergarage").slider({
    range: true,
    min: 1,
    max: 10,
    values: [1, 10],
    step: 1,
    slide: SliderDisplay
});


$("#slider-Powerdoor").slider({
    range: true,
    min: 1,
    max: 10,
    values: [1, 10],
    step: 1,
    slide: SliderDisplay
});

function SliderDisplay(event, ui) {
    $($(this).attr("rel")).val("$" + ui.values[0] + " - $" + ui.values[1]);
}

Answer 2

您可以通过ID找到输入：

function SliderDisplay(event, ui) {
        var id = '#' + event.target.id.replace('slider','price');
        $(id).val("$" + ui.values[0] + " - $" + ui.values[1]);
    }

幻灯片事件中的jQuery Slider ID？

2 个答案: