JQuery replaceWith () в выпадающем списке - PullRequest
Новая
       20

JQuery replaceWith () в выпадающем списке

1 голос
/ 23 февраля 2020

Я новичок в 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 - это что-то вроде функции перемещения. Как я могу сохранить иконку в выпадающем списке?

1 Ответ

0 голосов
/ 23 февраля 2020

Вам необходимо добавить и удалить класс для вашего элемента, т.е.

В случае успеха функция 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' );
}
...