JQueryでは、定義されたクリック機能内でクリックされた要素への参照を取得するにはどうすればよいですか？

Question

私は

$listItems.click(function(e) { 
    e.stopPropagation(); 
    console.log($(this)); 
    var selectedText = $(this).text(); 
    selectItemFromStyledList($styledSelect, $this, selectedText, $list) 
}); 

は、私は関数にコードを配置したいので、私はこの

$listItems.click({styledSelect: $styledSelect, selectMenu: $this, listItem: $(this), list: $list}, clickListItem); 

を試してみた...誰かが私のリストから、「LI」要素をクリックした状況を処理するため、このjQueryのを使用

しかし、私の関数では、 "listItem"パラメータはクリックされたリスト項目ではありません（ウィンドウ自体のように見えます）。関数内でクリックされた要素への参照を取得するにはどうすればよいですか？以下で詳しく説明します。

function clickListItem(event) 
{ 
     var $styledSelect = $(event.data.styledSelect); 
     var $selectMenu = $(event.data.selectMenu); 
     var $listItem = $(event.data.listItem);  // This is not the item that was clicked 
     var $list = $(event.data.list); 

     event.stopPropagation(); 
     var selectedText = $listItem.text(); 
     selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list) 
}  // clickListItem 

Answer 1

重複get clicked element using jquery on event?です。

コールバック関数に$(this)を使用するか、e.dataの代わりにを使用してください。

Answer 2

$（this）はコールバック関数内で現在のターゲット要素を表します。しかし、clickListItem（）メソッドに渡しているときには、外部にアクセスしています。これは現在のコンテキスト（ウィンドウなど）を表します。 したがって、コールバックメソッドに渡したり、あなたの方法でevent.target使用

Answer 3

通常どおりすぐ下のデモのように、thisまたはevent.targetを使用します。

function clickListItem(event) { 
 
    console.log(this); 
 
    console.log(event.target); 
 
    console.log(event.data); 
 
} 
 

 
$(function() { 
 
    $listItems = $('#trinity > li'); 
 
    $listItems.click({some:'data',over:'here'}, clickListItem); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="trinity"> 
 
    <li>Father</li> 
 
    <li>Son</li> 
 
    <li>Holy Spirit</li> 
 
</ul>