将链接转到jQuery图标

Question

我想将两个“投票”链接转换为jQuery UI图标。一个是upvote链接，应该是带有向上箭头的图标，一个是downvote链接，应该是带有向下箭头的图标。这是链接的RoR代码之一：

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

我还希望在点击图标时更改图标的颜色，再次单击图标时，它应该更改回原始颜色。我怎么能做到这一切？

Answer 1

只使用CSS并通过jQuery触摸JS的解决方案：

创建一个图标的精灵，箭头的两个版本（每种颜色一个）在彼此之下 - 例如像这样的东西：

提供你的链接类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');
});