单击后如何更改 <a> 的文本？

Question

我的 WordPress 网站上有这个自定义锚按钮：

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

我希望它在单击事件时更改其文本。 javascript/php 可以吗？

Answer 1

您可以在点击

后通过 JavaScript 更改 innerHTML

与 jQuery:

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

Answer 2

使用 Javascript，单击事件处理程序

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

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

Answer 3

是的，这对于一些 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>

单击后如何更改 <a> 的文本？

How to change text of an <a> once clicked?

html

javascript

wordpress

anchor

jquery