用jquery替换图像-js.erb-Rails

Question

我现在有一个ajax调用，它可以更改对象的状态。 当发生点击动作时，我还希望它更改UI中该特定对象的背景图像。 我正在尝试找到最佳方法。 我尝试了replaceWith方法，但它正在打印文本而不是图像。 如果有人知道这样做的简单方法，那就太好了，谢谢。

视图

<tbody>
  <tr class="<%= snitch.classes %>">
    <td>
        <%= link_to "<span id='snitch_#{snitch.token}_icon' class='icon led'></span><span>#{snitch.name}</span>".html_safe, snitch_path(snitch), class: "name"%>
    </td>
    <td class="interval"><span class="vspace"><%= snitch.interval %></span></td>
    <td class="last-checked">
      <span class="vspace">
        <% if snitch.source.checked_in_healthy_at %>
          <span data-tooltip="Checked in healthy at UTC(<%= snitch.source.checked_in_healthy_at.to_i %>) || LOCAL(<%= snitch.source.checked_in_healthy_at.to_i %>)">
            Last seen <strong><%= snitch.checked_in_healthy_at(title: nil) %></strong>
          </span>
        <% else %>
          <strong><%= snitch.checked_in_healthy_at %></strong>
        <% end %>
      </span>
    </td>
    <td class="snitch-controls" data-icons="<%= snitch.pauseable? ? "5" : "4" %>">
      <%= render 'menu', snitch: snitch %>
      <nav class="snitch-states" >
        <% if snitch.pauseable? %>
          <%= link_to 'Pause', pause_snitch_path(snitch, remote: true), class: 'icon icon-pause pause',
            data: { tooltip: "Pause" },
            rel: "modal:open" %>
        <% end %>

        <%= link_to 'Delete', delete_snitch_path(snitch), rel: 'modal:open',
          data: { tooltip: "Delete" },
          class: 'icon icon-delete delete', title: "Delete #{snitch.name}" %>
        </nav>
    </td>
  </tr>
</tbody>

JS

 $('#snitch_<%= @snitch.token %>_icon').append("")

这是我尝试做的不完整的尝试，但是这样的事情？ 也许？

Answer 1

看起来所有链接都共享一个通用的类name 。 因此，最好通过该CSS类选择链接，而不要通过其ID选择链接。 同样，一种简单的方法是在单击时添加其他类，然后更改CSS文件中的背景图像。

像这样：

$('.name').on('click', function(e){
  $(this).addClass('clicked');
});

.name {
  background-image: url('first.png');
}

.name.clicked {
  background-image: url('changed-image.png');  
}