Question

它与stackoverflow上的相似 - 你可以提出评论，当你这样做的时候会用橙色箭头标记。但是，我有2个图标（开启和关闭）用于upvote，2个用于downvote。问题是当我点击upvote时，它会将图标更改为＆＃39; on＆＃39;这很好，但是当我点击downvote之后，upvote保持不变（带有图标）。所以，我基本上得到2＆＃39;的图标。

目标：当您进行投票/投票然后决定更改投票时，之前选择的图标应为“关闭”

-my current code -

<div class="thumbsup">
    <%= link_to image_tag('othericons/thumbsup_off.PNG', height: '20', width: '20', id: "imgClickAndChange", :onclick => "window.changeImage($(this))"),  like_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
</div>

<div class="thumbsdown">
  <%= link_to image_tag('othericons/thumbsdown_off.PNG', height: '20', width: '20', id: "imgClickAndChange", :onclick => "window.toggleImage($(this))"), dislike_post_comment_path(comment.post_id, comment), method: :put, :remote => true %>
</div>

的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")

window.toggleImage = (source) ->
    console.log "called changeImage(source)"
    $source = $(source)
    imagePath = $source.attr("src")
    if imagePath && imagePath == "/assets/othericons/thumbsdown_off.PNG"
      console.log "thumbsdown is currently OFF"
      $source.attr("src", "/assets/othericons/thumbsdown_on.PNG")
    else
      console.log "thumbsdown is currently ON"
      $source.attr("src", "/assets/othericons/thumbsdown_off.PNG")

Answer 1

使用来自服务器的数据处理此问题会更好：

#app/controllers/votes_controller.rb
def like
     #your code
     status = "on"
     respond_to do |format|
         format.js { render json: status.to_json }
     end
end

#same for dislike, except status = "off"

然后，您可以使用ajax:success回调处理图像：

$(document).on "ajax:success", "#imgClickAndChange", (data) ->
    $(this).attr("src"), "/assets/othericons/thumbsup_"+ data +".PNG")

目前，我甚至不知道你的咖啡是如何开火的？它不受任何事件的束缚？

Rails 4：使用coffeescript进行Upvote / Downvote

1 个答案: