保存點擊元素並從另一個對象訪問

Question

我想要做的是在一組特定的DOM元素上設置一個點擊事件。

我想記住哪些元素已被點擊，因爲我可能需要稍後從中檢索一些信息。

如果可能的話，我會希望能夠從另一個JS對象訪問它。

下面是我迄今爲止...

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
<button> 
     Which have you clicked on? 
</button> 

<script> 
var listItem = { 
    elementHandle: $('li'), 
    instanceClicked: '', 
    bindEventHandlers: function(){ 
     $(this.elementHandle).click(this.alertTheContent); 
    }, 
    alertTheContent: function(){ 
     this.instanceClicked = $(this); 
     alert(this.instanceClicked.html()); 
    } 
} 

var button = { 
    elementHandle: $('button'), 
    bindEventHandlers: function(){ 
     $(this.elementHandle).click(this.showListItemClicked); 
    }, 
    showListItemClicked: function(){ 
     console.log(listItem.instanceClicked); 
    } 
} 

listItem.bindEventHandlers(); 
button.bindEventHandlers(); 
</script> 

我想我接近，但在showClickedItem（）函數控制檯日誌返回「」。就像我最初創建listItem對象時一樣。

請在這裏找到小提琴https://jsfiddle.net/rbfaxw12/

Answer 1

您需要在alertTheContent功能使用listItem代替this作爲this指調用單擊處理程序即li不listItem

alertTheContent: function(){ 
    listItem.instanceClicked = $(this); 
    alert(listItem.instanceClicked.html()); 
} 

DEMO當前元素上下文

Answer 2

而不是this.instanceClicked = $(this);使用listItem.instanceClicked = $(this);