Доступ к внутреннему тексту с помощью $ (this) с помощью jQuery

Question

У меня есть кнопка, и я хочу, чтобы во внутреннем тексте, используя jQuery, нажата кнопка. Я знаю, как использовать идентификатор, чтобы получить текст кнопки ($("#testID").text()), но это не вариант для меня. Я хотел бы использовать ключевое слово $(this) вместо id, но я не уверен, как это сделать.

Этот HTML:

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

Код JavaScript:

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

Answer 1

Проход в 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 объекта

Answer 2

вам нужно передать элемент абонента функции ...

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>

Answer 3

Вы можете дать ему класс по кнопке, а затем каждый раз, когда класс, нажмите ее определит 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