下拉问题中的 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' );
}