现在我做了这个：
<a href="#" title="[+] Add as favorite"><div class="addFavorite"></div></a>
class =“addFavorite”,是一个普通的灰色星.
然后我有另一个类=“AlreadyFavorite”,这是一个黄色的星.
我想创建一个函数,所以当你点击灰色星形时,它会发送一个ajax调用(？),然后在成功时它变成黄色(将类更改为AlreadyFavorite).
我知道如何制作一个发送ajax调用的onclick函数,但是如何更改样式/将图像图标更改为黄色？
CSS：
.addFavorit{
background: url('../images/addFavorit.png');
width: 48px;
height: 48px;
}
.alreadyFavorit{
background: url('../images/addFavorit_hover.png');
width: 48px;
height: 48px;
}
解决方法
尽量不要在可能的情况下重复自己并避免不必要的元素：
HTML：
<a href="#" id="fav" title="[+] Add as favorite"> </a>
CSS：
a#fav{
background: url('../images/addFavorit.png');
display: block;
width: 48px;
height: 48px;
}
a#fav.active{
background: url('../images/addFavorit_hover.png');
}
JAVASCRIPT
function addFav(){
$.ajax({
url: "/favorites/add",data: {"id": articleID},success: function(){
$('a#fav')
.addClass('active')
.attr('title','[-] Remove from favorites')
.unbind('click')
.bind('click',removeFav)
;
}
});
}
function removeFav(){
$.ajax({
url: "/favorites/remove",success: function(){
$('a#fav')
.removeClass('active')
.attr('title','[+] Add as favorite')
.unbind('click')
.bind('click',addFav)
;
}
});
}
//this will make the link listen to function addFav (you might know this already)
$('a#fav').bind('click',addFav);
第一次调用addFav()中指定的url时单击链接,成功处理后将调用成功定义的函数.结果：
<a href="#" id="fav" class="active" title="[-] Remove as favorite"> </a>
由于重新绑定,第二次单击将调用removeFav().结果将是：
<a href="#" id="fav" class="" title="[+] Add as favorite"> </a>
在那之后,如果您的服务器没有采取行动,这将是一个无限循环.
