Rails 远程链接作为非内联、非表单“按钮”

Question

我正在尝试做一个 ajax“按钮”（不是实际的表单按钮），其行为就像普通的 link_to "content", some_path, remote:true 一样。当我点击它时，它会换出图像以指示状态（例如开/关、投票/未投票等）

原因是，我想使用 javascript 添加类，换出图像，切换它们。通常，人们通过在 CSS 中为给定类指定 background-image 属性，并通过 javascript 添加/删除类来做到这一点。

当然，如果你使用 rails link_to，它会创建一个 a 标签，它是一个内联元素。此内联元素对上述所需的行为不友好。您最终不得不使用实际的图像标签，使 javascript DOM 遍历以及 CSS 更加混乱。你最终也会做一些愚蠢的事情，比如

<div>
  <a>
    <div>
    </div>
  </a>
</div>

只是为了保持链接标签为a标签，同时尽量保证“按钮”的一定大小

我正在寻找一种优雅的方式来完成创建一个简单的 ajax“按钮”，它的行为就像一个远程链接，它不是一个表单按钮，我可以简单地向元素添加/删除一个类，以便通过 CSS 替换图片。

有没有好的解决方案？还是我必须在指定大小的 div 元素上使用 spaghetti jquery 和 ajax 调用？ （我尝试将content_tag 嵌套在link_to 中，但这并不比嵌套image_tag 代替content_tag 好）（我考虑过使用display: block 对带有@987654329 的标签执行display: block @. 这个方法好用吗？为什么？）

Answer 1

link_to 上的远程选项是为了允许对链接 URL 的 ajax 请求而创建的。当您查询服务器时，只有在 AJAX 查询成功完成时才会更改类。我会这样做：

<%= link_to "Vote", some_path, remote:true, "data-type" => :json, class: "vote-button" %>

使用以下jquery代码：

$('.vote-button').on('ajax:success', function(evt, data, status, xhr){
  if(data.voted == true){
    $(this).addClass("voted");
  }else{
    $(this).removeClass("voted");
  }
})

假设您的控制器操作返回一个包含投票键的 JSON 对象：

class VoteController < ApplicationController
  def update
    voted = # Some stuff happening here that says if voted or not
    render :json => {voted: voted}
  end
end

你的 css 看起来像：

.vote-button{
  background-image: asset-url(unvoted.png);
}

.vote-button.voted{
  background-image: asset-url(voted.png);
}

不要只是复制粘贴，因为我不能 100% 确定它是否有效，但你明白了。