jQuery: создание любимой кнопки с функцией?

Question

Прямо сейчас я сделал это:

<a href="#" title="[+] Add as favorite"><div class="addFavorite"></div></a>

the class = "addFavorite", это обычная серая звезда.

Тогда у меня есть другой класс = "AlreadyFavorite", это желтая звезда.

Я хочу создать функцию, поэтому, когда вы нажимаете на серую звездочку, она отправляет вызов ajax (?), А затем при успехе становится желтой (изменяя класс на AlreadyFavorite).

Я знаю, как сделать функцию onclick, которая отправляет вызов ajax, но как мне изменить стиль / изменить значок изображения на желтый?

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

При нажатии на ссылку при первом вызове URL-адреса, указанного в addFav(), и после успешной обработки будет вызвана функция, определенная успешно.Результат:

<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

Просто измените класс на alreadyFavorite после вызова ajax? или мне чего-то не хватает?

или alreadyFavorit (как в CSS)

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