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

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 应包含触发事件的原始元素。