將字段添加到jquery元素並與click事件一起使用

Question

我正在嘗試將字段添加到jQuery元素並在click事件回調中使用它，為什么它不起作用，可能嗎？

$button = $("#myButton");
$button.i = 5;
$button.on('click',function(){
    console.log($(this).i)
});

Answer 1

您根本不會在每種情況下都訪問相同的對象。

在jQuery事件處理程序回調中， this等於DOM節點本身（即，元素，而不是您將i屬性設置為的jQuery對象。

有很多解決方法：

1. 您可以在回調函數中引用$ button
2. 您使用jQuery的.attr（）在DOM節點上設置屬性
   • 例如$ button.attr（'i'，5）

希望有幫助！

---

更新以回答您的問題：

在該場景中，只有一個DOM節點，即<button> -我們可以將其視為整個對象的一個​​基礎對象。

創建$ button變量時，可以通過將DOM節點交給jQuery來完成，並返回一個新對象。 這就是包含所有這些很棒的jQuery方法的內容，例如您在上面使用的.on() 。

即$ button和<button>是不同的對象。

現在讓我們考慮一下您的i屬性...

您將i設置為JavaScript對象$ button的屬性，但是如上所述，這是一個與<button> DOM節點截然不同的對象（由jQuery為我們創建）。 在$ button上設置i與DOM節點無關。

現在，在您的jQuery提供的單擊處理程序中，該庫this綁定設置為原始DOM節點， 而不是您的$ button對象。

在單擊處理程序內，您執行與腳本開頭非常相似的操作-引用DOM節點<button> （ this ），並將其提供給jQuery，以便它可以再次創建新對象 。

因此， <button>它與$ button是不同的對象，而$ button也是與單擊處理程序中的$（this）不同的對象。

最后，讓我們考慮一下jQuery .attr()幫助器函數。

如果不是在$ button上設置i屬性，而是使用.attr方法設置i 屬性 ，則jQuery內部將通過分配包含值5的屬性i來更新DOM節點本身。

正如我們在一開始所確定的那樣，DOM節點一直都是相同的，因此我們可以輕松地在點擊處理程序中再次訪問該屬性！

Answer 2

這是一個例子。 閱讀有關jquery.data的一些信息

var button = $("#myButton");
button.data('i', 5);
button.click(function(){
    alert($(this).data('i'))
});