已经替换的元素上的replaceWith

Question

我非常清楚，当您使用replaceWith()时，它会从DOM中移除元素并替换它，但是如何传递新创建的元素以便能够再次替换它呢？

例如，我有一个图标，它的onclick=""事件如下所示

<i onclick="toggleStatus(true, this, '.$user->id.')" class="icon-red fas fa-times"></i>

然后运行以下函数，该函数用加载轮替换图标。当新的加载轮替换DOM中的这个元素时，如何传递新创建的加载轮，以便能够再次替换它？

到目前为止，这就是我所拥有的

window.toggleStatus = function(status, elem, id){
    var $i = $(elem);
    //Replace the icon with a spinning wheel for effect

    $i.removeClass().addClass('fa fa-spinner animation-spinning');

    setTimeout(function(){
       if(status){
            $i.removeClass('fa fa-spinner animation-spinning').addClass('direct-debit-icon icon-green fas fa-check').attr('onclick','toggleStatus(false, this, '+id+')');
       } else {
            $i.removeClass('fa fa-spinner animation-spinning').addClass('direct-debit-icon icon-red fas fa-times').attr('onclick','toggleStatus(true, this, '+id+')');
       }
    },1000);
}

备注我必须使用replaceWith()，不能使用字体Awese5将元素类更改为im，这样<i>元素就可以像下面这样被SVG替换

<svg onclick="toggleStatus(false, this, 1)" class="svg-inline--fa fa-check fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>

这个问题是根据下面的一个答案及其评论进行编辑的。

Answer 1

您根本不需要替换元素。考虑到您的逻辑，您可以使用add/remove/toggle类修改单个<i>实例上的类。

还要注意，您应该使用不引人注目的事件处理程序(特别是已经在页面中包含了jQuery )，而不是使用过时的on*事件属性。

说了这么多，试试这个：

​

$('i').click(function() {
  var $i = $(this);
  var userId = $i.data('userid');
  console.log(userId);
  
  $i.removeClass('icon-red icon-green fa-check fa-times').addClass('fa-spinner fa-spin');
  
  var status = Math.random() > 0.5; // just for testing
  setTimeout(function() {
    $i.removeClass('fa-spinner fa-spin');
    if (status) {
      $i.addClass('icon-green fa-check')
    } else {
      $i.addClass('icon-red fa-times');
    }
  }, 1000);
});

.icon-red { color: #C00; }
.icon-green { color: #0C0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />

<i data-userid="abc-123" class="icon-red fas fa-times"></i>
<i data-userid="zxy-987" class="icon-red fas fa-times"></i>

​

请注意，上面使用的是字体v5，因此animation-spinning类已更改为fa-spin