javascript - 在其单击事件处理程序中访问按钮的属性

Question

一个按钮:

<button class='button pasteButton' id='pasteButton1'>Button Label</button>

按钮的点击处理程序:

$(document).on('click','.pasteButton',function(e){

    //alert("paste clicked");
    alert(this.id);

    e.preventDefault();
});

我可以使用上面的代码在点击处理程序中获取按钮的 id。如何获取按钮的值(即“按钮标签”)或点击处理程序中的其他一些属性？

(当我们谈到这个主题时，为什么有时我们需要使用 jQuery 做:this(例如，上面)，而在其他时候我们需要做: $(this) ...请问有什么区别的简单解释吗？

Answer 1

如果你想检索文本，要么访问 textContent property在 DOM element 上:

this.textContent // Button Label

或者使用 jQuery .text() method :

$(this).text() // Button Label

---

Why is it that that with jQuery sometimes we need to do: this (e.g., above) and at other times we need to do: $(this)

在这种情况下，this 是一个 DOM element ，而 $(this) 是一个 jQuery object .

原生 DOM 元素具有属性，例如 value、id、textContent。

this.id // pasteButton1
this.textContent // Button Label

值得指出的是，您不能直接在 DOM 元素上使用 jQuery 方法，这就是为什么要用 $() 包装 this > 为了把它变成一个 jQuery 对象。

$(this).prop('id') // pasteButton1
$(this).text() // Button Label