Question

我有以下代码实现2 jQuery sliders：

<script type="text/javascript">
    $(document).ready(function () {
        $("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: handleSlide });
        $("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: handleSlide });
    });

    function handleSlide(event, ui) {
        $("#lblInfo").text(ui.id + ':' + ui.value);
    }
</script>

如您所见，两个滑块都会生成一个由handleSlide函数处理的幻灯片事件。在handleSlide函数内部，我可以通过调用ui.value来获取滑块的值，但是我如何知道哪个滑块实际生成了该事件？

我已经尝试了ui.id，ui.name和其他一些似乎合乎逻辑的人，但他们都回归未定义。我如何获得其CSS实现的实际名称（例如#wheelRight或#wheelLeft）？

感谢。

Answer 1

尝试包装ui.handle

function handleSlide(event, ui) {
  $("#lblInfo").text( $(ui.handle).attr("id") + ':' + ui.value);
}

编辑：糟糕，返回“a”元素。这应该返回父元素id：

$(ui.handle).parent().attr('id')

Answer 2

您可以将id选择器（或您选择的任何参数）直接传递给处理函数：

$(document).ready(function () {
    $("#wheelLeft").slider({
        value: 50, min: -100, max: 100,
        slide: function(event, ui) {
            handleSlide(event, ui, "#wheelLeft");
        }
    });
    $("#wheelRight").slider({
        value: -10, min: -100, max: 100,
        slide: function(event, ui) {
            handleSlide(event, ui, "#wheelRight");
        }
    });
});

function handleSlide(event, ui, idSelector)
{
    $("#lblInfo").text(idSelector);
}

Answer 3

function handleSlide(event, ui) {
    var sender = event.srcElement || event.target;
     $("#lblInfo").text(ui.id + ':' + ui.value);
}

sender应该包含触发事件的原始元素。

如何获取启动事件的UI控件的名称？

3 个答案: