레일 4 - 커피 스크립트가 제대로 작동하지 않습니다.

Question

목표는 클릭시 아이콘을 변경하는 것입니다. 댓글에 대한 간단한 아이콘 위로 아이콘입니다.

쇼 파일

<a data-method="put" data-remote="true" href="/comments/1/like" rel="nofollow"> 

    <img alt="" src="/assets/othericons/thumbsup_off.PNG" 
    style="height: 20px; width: 20px" id="imgClickAndChange" onclick="changeImage()" /> 

</a> 

커피 스크립트

$("#imgClickAndChange").click -> 
    imagePath = $("#imgClickAndChange").attr("src") 
    if imagePath is "/assets/othericons/thumbsup_off.PNG" 
    $("#imgClickAndChange").attr "src", "/assets/othericons/thumbsup_on.PNG" 
    else 
    $("#imgClickAndChange").attr "src", "/assets/othericons/thumbsup_off.PNG" 
    return 

aplication.js 파일

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require jquery.ui.all 
//= require jquery.turbolinks 
//= require jquery-simple-pagination-plugin 
//= require jquery.raty 
//= require_tree . 

Answer 1

나는이 코드를 사용하는 것이 좋습니다 :

<img alt="" src="/assets/othericons/thumbsup_off.PNG" 
    style="height: 20px; width: 20px" id="imgClickAndChange" onclick="window.changeImage($(this))" /> 

:coffeescript 
    window.changeImage = (source) -> 
    console.log "called changeImage(source)" 
    $source = $(source) 
    imagePath = $source.attr("src") 
    if imagePath && imagePath == "/assets/othericons/thumbsup_off.PNG" 
     console.log "thumbsup is currently OFF" 
     $source.attr("src", "/assets/othericons/thumbsup_on.PNG") 
    else 
     console.log "thumbsup is currently ON" 
     $source.attr("src", "/assets/othericons/thumbsup_off.PNG") 

을

콘솔에 메시지가 표시되어야합니다 (Chrome 브라우저의 경우 f12, '콘솔'탭). 이러한 메시지가 표시되지 않으면 JavaScript/Coffeescript에 문제가있는 것입니다.

약간의 제안 : js 함수의 이름을 "changeImage()"의 이름을 "toggleImage()"로 변경하는 이유는 무엇입니까? 이 기능은 실제로 2 개의 이미지 사이에서 전환하기 때문에 (더 작지 않고 더 이상은 아닙니다).

희망이 도움이됩니다.