如何獲取啓動事件的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

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

的sender應該包含觸發該事件的原始元素。

Answer 3

您可以通過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); 
}