在jQuery中替换一个元素并返回新元素

如何替换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将永远留在这里。

有没有办法可以返回替换元素而不选择它?

提前致谢。

解决方法

给加载图像一个类,然后在后回调中,使用类作为选择器来查找刚刚注入的图像。
$("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'/>");
  });
});

如果您一次可能有几个运行,您可以得到最接近的父项,并在搜索该类时将其用作上下文。

编辑:另一个替代方法是使用变量来存储新的元素,并且消除了在函数返回时应用该类并搜索新元素的需要。

$("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'/>");
  });
});

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...