如何更改<a>一次单击的</a>文字<a>？</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来说是微不足道的。 我将假设您使用的是电子商务插件，并且页面上可能有多个按钮。 您可以只获取所有按钮的nodeList并循环遍历，向每个按钮添加一个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

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

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

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