jquery - 在 jQuery 中替换元素并返回新元素

Question

如何替换 jQuery 中的元素并返回替换元素而不是被删除的元素？

我有以下场景。我有很多复选框，一旦您单击其中一个，该复选框就会被加载图标取代。一旦发生一些 AJAX 事件，加载图标就会被勾号图标取代。

使用 jQuery 的 replaceWith ，你会这样做:

$("input[type='checkbox']").click(function() {

  $(this).replaceWith("<img src='loading.jpg' alt='loading'/>");
  $.post("somepage.php");
  $(this).replaceWith("<img src='tick.jpg' alt='done'/>"); 

});

但是，这不起作用，因为 replaceWith 返回已删除的元素，而不是添加的元素。因此，在 AJAX 工作完成后，loading.jpg 将永远留在那里。

有什么方法可以在不选择替换元素的情况下返回它吗？

提前致谢。

Answer 1

为加载图像指定一个类，然后在后回调中，使用该类作为选择器来查找刚刚注入(inject)的图像。

$("input[type='checkbox']").click(function() {
  $(this).replaceWith("<img src='loading.jpg' alt='loading' class='loading-image' />");
  $.post("somepage.php", function() {
      $('.loading-image').replaceWith("<img src='tick.jpg' alt='done'/>");
  });
});

如果您可能同时运行其中多个此类，则可以获取 this 最接近的父级，并在搜索该类时将其用作上下文。

编辑:另一种替代方案，使用变量来存储新元素，并且无需在函数返回时应用类并搜索新元素。

$("input[type='checkbox']").click(function() {
  var loading = $("<img src='loading.jpg' alt='loading' />");
  $(this).replaceWith(loading);
  $.post("somepage.php", function() {
      loading.replaceWith("<img src='tick.jpg' alt='done'/>");
  });
});