使用jQuery的$(this)访问内部文本

Access inner text using $(this) with jQuery

本文关键字：访问 内部 文本 this jQuery 使用      更新时间：2023-09-26

我有一个按钮，我想使用jQuery记录内部文本，当该按钮被点击。我知道如何使用id来获取按钮($("#testID").text())的文本，但这不是我的选项。我想使用$(this)关键字而不是id，但我不确定如何做到这一点。

html: 

<button id="testID" onclick="getButtonText()">Button Text</button>

javascript: 

function getButtonText() {
    console.log("this text = " + $(this).text()); //not working
}

通过this

html: 

<button id="testID" onclick="getButtonText(this)">Button Text</button>

javascript: 

function getButtonText(self) {
    console.log("this text = " + $(self).text()); //not working
}

否则，this将是window对象

您需要将调用者元素传递给函数…

function getButtonText(element) {
    var $this = $(element);
    console.log("this text = " + $this.text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="testID" onclick="getButtonText(this)">Button Text</button>

虽然正确的jQuery方法应该是这样做的…

$('#testID').on('click',function() {
  console.log("this text = " + $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="testID">Button Text</button>

你可以给它一个按钮上的类，然后每当一个类被点击，它将确定DOM，这是$(this)。例子:

在你的html文件:<button id="testID" class="test-btn">Button Text</button>

在你的脚本文件中:

$(document).ready(function () {
$(".test-btn").click(function(){ $("#message").text("The Text is: " + $(this).text() ); }); });

参见我的例子Plunker: http://plnkr.co/edit/e94QraQfCOzGlkirvTJj?p=preview

相关文章：