Как изменить текст <a>после нажатия?

Question

У меня есть эта пользовательская кнопка привязки на моем сайте WordPress:

 <a class="add-to-cart-button">Buy Now</a>

Я бы хотел, чтобы он изменил свой текст по событию клика. Можно ли это сделать с помощью javascript / php?

Answer 1

Используя Javascript, нажмите обработчик событий

 javascript =>
 document.getElementsByClassName("add-to-cart-button").innerHTML =
 'Text you want';

 jQUery => $('.add-to-cart-button').html('Text you want');

Answer 2

Да, это довольно тривиально с некоторыми JavaScript. Я собираюсь предположить, что вы используете плагин для электронной коммерции и есть вероятность, что на странице может быть более одной кнопки. Вы можете просто получить список узлов всех кнопок и пройти по нему, добавив к каждой из них функцию onclick. Для этого вам не нужен jQuery.

Возьмите следующий фрагмент:

let addButtons = document.querySelectorAll('.add-to-cart-button');

for( i = 0, n = addButtons.length; i < n; ++i ){
  addButtons[i].onclick = function(){
    this.innerText = 'Thanks for buying!';
    this.classList.add( 'purchased' );
  };
}

.add-to-cart-button{background:#0095ee;padding:10px 20px;color:#fff;border-radius:3px;text-decoration:none}
.purchased { background: #ee3d96; }
.purchased:after { content: "?"; }

<a href="#" class="add-to-cart-button">Buy Now</a>

<a href="#" class="add-to-cart-button">Buy Now</a>

<a href="#" class="add-to-cart-button">Buy Now</a>

Answer 3

Вы можете изменить innerHTML через JavaScript после нажатия

с JQuery:

$(".add-to-cart-button").click(function () {
  $(this).html('New Text');
});