Question

我想要做的是在一组特定的DOM元素上设置click事件。

我想记住哪个元素已被点击，因为我可能需要稍后从中检索一些信息。

如果可能的话，我希望能够从另一个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（）函数的控制台登录正在返回＆＃39;＆＃39;。就像我最初创建listItem对象一样。

请在此处找到小提琴https://jsfiddle.net/rbfaxw12/

Answer 1

您需要在listItem函数中使用this而不是alertTheContent，因为this是指调用点击处理程序的当前元素上下文，即li listItem

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

DEMO

Answer 2

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

保存单击的元素并从另一个对象访问它

2 个答案: