Question

更新

按照Zach Saucier的说明，添加了以下代码：

JS

this.onclick = function() { this.style.background = "red"; this.innerHTML = "Bought"; }

所以按钮是：

<a onclick="javascript:func(this)" class="ajax_add_to_cart_button comprar_mat" rel="ajax_id_product_14" href="../cart.php?add&amp;id_product=14" id="matricularme">Matricularme</a>

但仍然无效

我试图在我的网站上的几个按钮上添加一些效果，但我无法做到。

HTML链接（显示为按钮）如下所示：

<td class="marker">
    <a class="ajax_add_to_cart_button comprar_mat" rel="ajax_id_product_14" href="../cart.php?add&amp;id_product=14">Buy it now!</a>
</td>

正如您所见，此按钮在我的网站上添加了一个产品，我只想将整个文本更改为“已购买”文本并替换背景。

我应该使用什么？任何一种Jquery？或者只是添加一个css样式，其中一个精灵图像是“立即购买！”和“买”，所以只需改变背景位置？

由于

Answer 1

对于此HTML

<td class="marker">
    <a onclick="buy()" id="myid">Buy it now!</a>
</td>

设置此JS

function buy() { 
    var ele=document.getElementById("myid");
    ele.style.background = "red"; 
    ele.innerHTML = "Bought"; 
}

fiddle

另一个版本，包含Zach提供的可重用性和变量字符串处理：

<td class="marker">
    <a onclick="buy(this)" id="myid">Buy it now!</a>
</td>
<br>
<td class="marker">
    <a onclick="buy(this)" id="myid">Buy it as gift!</a>
</td>


function buy(ele) { 
    ele.style.background = "red"; 
    ele.innerHTML = ele.innerHTML.replace("Buy it", "Bought"); 
}

demo

改变背景颜色（Jquery？Css3？）

1 个答案: