2014-01-13 4 views
0

이 질문이 매우 기본적이라면 유감입니다. 불행히도 저는 JS와 프론트 엔드 개발 전반에 대해 경험이 풍부합니다. 내가 달성하려고하는 것은 버튼 (ala facebook)과 같이 매우 간단합니다. 버튼을 누른 후 변경하면 '좋아요'로 전환하는 버튼과 달리 '좋아요'버튼 전환과 달리 클릭하면 전환됩니다. 레일즈 (4.0)와 JQuery를 사용하고 있습니다.좋아하는 버튼을 어떻게 만듭니 까?

내가 지금 가지고있는 것은 백엔드에서 올바르게 작동하지만 프론트 엔드에서 작동하지 않는 버튼입니다. 즉, 좋아요에서 좋아하지 않는 사람으로, 그렇지 않으면 좋아서 좋아지는 것으로 바뀌지 않습니다.

이 두 버튼을 포함하는 부분입니다 :

<div class="like-button"> 
    <% if current_user && current_user.liked?(object) %> 
    <%= link_to unlike_path(object), method: :delete, remote: true, id: "like_button-#{ object.id }", class: 'like-button' do %> 
     <span class="icon"></span> 
     <span class="label m3">Non mi Piace</span> 
    <% end %> 
    <% else %> 
    <%= link_to like_path(object), method: :post, remote: true, id: "like_button-#{ object.id }", class: 'like-button' do %> 
     <span class="icon"></span> 
     <span class="label m3">Mi Piace</span> 
    <% end %> 
    <% end %> 
</div> 

모든 것이 올바르게 작동, 나는 페이지를 다시로드하고 오른쪽 버튼을 표시하는 경우 올바르게 버튼의 상태를 확인하기 때문에 나는 그것을 알고있다. 나는 (... 지금까지 또한 내가 프론트 엔드의 문제를 통해 약간의 가시성을했기 때문에) 불행하게도 JS에 대해 너무 확실하지 않다 : 내가 잘못

$(".like-button").on("click", function() { 
    $("#like_button_container").html("<%= render partial: 'shared/like', locals: { object: @likable } %>"); 
}); 

을 뭐하는 거지? 나는 모든 것을 포함하는 div 클래스를 like_button_container로 변경하려고 시도했지만 여전히 작동하지 않습니다.

누군가가 빛을 낼 수 있습니까?

TIA

+0

'<% = 부분 렌더링 :'공유/같은 '지역 주민, {목적 : @likable} %>'만 페이지가 브라우저에 반환 될 때, 한 번 발생을 . Javascript에 관한 한, 페이지가 브라우저에 반환되었을 때 원래 있던 값만 포함됩니다. –

답변

1

이 작업은 jQuery를 사용하여 수행 할 수 있습니다. 여기

는 HTML입니다

<input type="button" class="like" value="like"> 

<input type="button" class="unlike" style="display:none;" value="unlike"> 


<script> 
$(function(){ 
$(".like").click(function(){ 

    $(this).hide() 
$(".unlike").show() 


}); 
$(".unlike").click(function(){ 

    $(this).hide() 
$(".like").show() 
//you can keep you logic here 
//you can make server side increment of the likes/unlike using jquery ajax post or 
//any login you want to put 

}) 

}); 

</script> 
관련 문제