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