一个下拉问题中的jQuery replaceWith（）

Question

我是JQuery的新手，但是replaceWith函数有问题。

我创建了一个下拉菜单。单击下拉菜单元素后，第一个按钮中的图标将更改，这就是我想要的。但是单击后，下拉列表中的图标将被删除。

这是我的HTML

<button title="Kein Status" data-toggle="dropdown" class="btn btn-xs btn-link btn-outline">
    <i id="icon" class="fas fa-thermometer-empty text-danger fa-lg"></i>
</button>
<ul class="dropdown-menu">
    <li><button class="dropdown-item" onclick="saveToDB(this,\'status1\',\'' . $fieldRow['id'] . '\',\'50\')"><i id="newIcon" class="fas fa-thermometer-quarter fa-lg text-warning"> </i> 50 % Status</button></li>
</ul> 

函数saveToDB

function saveToDB(column,id,value) {
  $.ajax({
    url: "edit.php",
    type: "POST",
    data:'column='+column+'&editval='+value+'&id='+id,
    success: function(data){
         var clone = $('#newIcon').show();
     $('#newIcon').replaceWith(clone);      
    }
  });
}

在单击下拉列表中的按钮后，单击代码

<li>
<button class="dropdown-item" onclick="saveToDB(this,\'status1\',\'' . $fieldRow['id'] . '\',\'50\')">
<i id="newIcon" class="fas fa-thermometer-quarter fa-lg text-warning"> </i> 50 % Status
</button>
</li>

更改为

<li>
<button class="dropdown-item" onclick="saveToDB(this,\'status1\',\'' . $fieldRow['id'] . '\',\'50\')"> 50 % Status
</button>
</li>

据我了解，replaceWith函数类似于移动函数。如何将图标保留在下拉列表中？

Answer 1

您需要在您的元素中添加和删除类即

在ajax的成功功能中添加检查

If($('#newIcon').hasClass('fa-thermometer-quarter'))
{
    $('#newIcon').removeClass('fa-thermometer-quarter');
    $('#newIcon').addClass('fa-check');
} else {
    $('#newIcon').removeClass('fa-check');
    $('#newIcon').addClass('fa-thermometer-quarter' );
}