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

Question

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

视图

std::tuple<A,B> { virtual void Serialize(); }

JS

<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>

对于我正在尝试做的事情，这是不完整的尝试但是这样的事情？可能？

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');  
}