[英]How to change text of an <a> once clicked?
我的WordPress網站上有此自定義錨按鈕:
<a class="add-to-cart-button">Buy Now</a>
我希望它在單擊事件時更改其文本。 是否可以使用javascript / php?
點擊后,您可以通過JavaScript更改innerHTML
使用jQuery:
$(".add-to-cart-button").click(function () {
$(this).html('New Text');
});
是的,這對於某些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>
使用Javascript,單擊事件處理程序
javascript =>
document.getElementsByClassName("add-to-cart-button").innerHTML =
'Text you want';
jQUery => $('.add-to-cart-button').html('Text you want');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.