Изменение цвета фона (Jquery CSS3?)

Question

UPDATE

Update:

В соответствии с инструкциями Zach Сокир, добавлены следующие коды:

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

Другой вариант, включающий reusabilitysugested Зак и обработки переменной строки:

<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