Question

现在我做到了：

<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;
}

Answer 1

尽量不要在可能的情况下重复自己并避免不必要的元素：

HTML：

<a href="#" id="fav" title="[+] Add as favorite">&nbsp;</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",
      data: {"id": articleID},
      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">&nbsp;</a>

由于重新绑定，第二次点击会调用removeFav()。结果将是：

<a href="#" id="fav" class="" title="[+] Add as favorite">&nbsp;</a>

在此之后，如果你的服务器没有采取行动，这将是一个无限循环。

Answer 2

在ajax调用后，只需将类更改为alreadyFavorite？或者有什么我想念的东西？

或者是alreadyFavorit（如在CSS中）

$('div').removeClass('addFavorit').addClass('alreadyFavorit')

jQuery：用功能制作一个收藏按钮？

2 个答案: