将链接转到 jQuery 图标

Question

我想将两个“投票”链接变成 jQuery UI 图标。一个是投票链接，应该是一个带有向上箭头的图标，一个是投票链接，应该是一个带有向下箭头的图标。这是链接的 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');
});