Повернуть ссылку на иконку jQuery

Question

Я хочу превратить две "голосующие" ссылки в значки пользовательского интерфейса jQuery.Одна из них - это ссылка вверх, которая должна быть значком со стрелкой вверх, а другая - ссылка вниз, которая должна быть значком со стрелкой вниз.Вот один из кодов RoR ссылки:

<%= link_to "+1", video_votes_path( :video_id => video.id, :type => "up" ), :method => :post, :remote => true %>

Я также хочу изменить цвет значка при нажатии, и при повторном нажатии он должен вернуться к своему первоначальному цвету.Как я могу сделать все это?

Answer 1

Решение, использующее только CSS и касание JS через jQuery:

Создайте спрайт вашей иконки, две версии вашей стрелки (по одной для каждого цвета) друг под другом - например, что-то вроде этого:

Дайте ссылкам классы vote и добавьте немного магии CSS и jQuery.

CSS:

// will show the upper part of the sprite by default
a.vote {
  display: block;
  text-indent: -999em;
  width: 15px;             // width of your sprite
  height: 15px;            // half the height of your sprite
  background: transparent url(your_sprite.png) no-repeat center top;
}

// will show the lower part of the sprite when toggled
a.vote.selected {
  background-position: center bottom;
}

JS:

$('a.vote').click(function(){
  $(this).toggleClass('selected');
});