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()，不能使用Font Awesome 5像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>

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

replaceWith on已被替换的元素

1 个答案: