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

에만 jQuery를 통해 CSS와 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'); 
});