jQuery для изменения FontAwesome CSS не работает?

У меня есть проект MVC, в котором я использую Ajax для обновления раздела представления, содержащего значок FontAwesome 5. FontAwesome задается с помощью класса CSS, поэтому я предположил, что могу легко удалить, а затем добавить CSS для значка. Однако, когда я пытаюсь изменить CSS через jQuery, CSS никогда не устанавливается. Класс добавления/удаления работает, как и ожидалось, в обычном классе CSS, который я изменяю, но не в классе FA valid-icon.

Это исходный HTML:

@if (Model.VALID_FLAG == "Y")
{
    <div class="validation__text-success" id="valid-flag>
        <i class="fas fa-check-circle" id="valid-icon"></i> Yes
    </div>
}
else
{
    <div class="validation__text-danger" id="valid-flag>
        <i class="fas fa-times-octagon" id="valid-icon"></i> No
    </div>
}

Это jQuery из вызова Ajax.

var $html = $(response);
if ($html.hasClass('alert-success')) {
    $("#valid-flag").text('Yes');
    $("#valid-flag").removeClass().addClass('validation__text-success');
    $("#valid-icon").removeClass().addClass('fas fa-check-circle');
}
else if ($html.hasClass('alert-danger')) {
    $("#valid-flag").text('No');
    $("#valid-flag").removeClass().addClass('validation__text-danger');
    $("#valid-icon").removeClass().addClass('fas fa-times-octagon');
}

jquery css font-awesome font-awesome-5
person Caverman    schedule 09.10.2018    source источник
comment
Кроме того, text() заменяет все содержимое, включая элемент значка.   -  person showdev    schedule 09.10.2018
comment
Фрагмент HTML был добавлен только для того, чтобы помочь понять, что я делаю. Второй фрагмент — это Ajax, который просматривает ответ, читает его как HTML, а затем ищет класс Bootstrap в возвращаемом HTML либо для предупреждения об успехе, либо предупреждения об опасности. В зависимости от того, какой класс найден, jQuery должен определить, какой текст и значок я отображаю в другом разделе страницы.   -  person Caverman    schedule 09.10.2018
comment
@showdev, ааа .... наверное, это и делает. Когда я проверяю элемент, тег ‹i› для FontAwesome просто отсутствует, поэтому он делает так, что вы говорите, что text() заменяет все это. Я попытался добавить тег ‹i› и соответствующий класс FA, но он просто отображался как необработанный HTML. Это привело меня к попытке просто изменить класс CSS для значка FA.   -  person Caverman    schedule 09.10.2018
comment
Я просил HTML в основном потому, что подозреваю, что ваш сценарий можно упростить. Если вы хотите опубликовать только обработанную разметку для $html, мы могли бы посмотреть.   -  person isherwood    schedule 09.10.2018
comment
Если вы добавляете HTML, используйте html() вместо text(). Другой вариант - обернуть текстовое содержимое #valid-flag в элемент, например. <span class="icon-text">Yes</span>. Таким образом, вы можете заменить текст, не заменяя значок.   -  person showdev    schedule 09.10.2018
comment
Кроме того, не рекомендуется полагаться на классы, присутствующие в вашей разметке. Вместо этого полагайтесь на статус полезной нагрузки возврата API. Я предполагаю, что там есть что ловить.   -  person isherwood    schedule 09.10.2018
comment
@isherwood, я согласен, я бы предпочел не полагаться на присутствие класса CSS в отношении того, что делать, но код, который мне возвращается, является предупреждением Bootstrap, и все. Мне пришлось бы прыгать через обручи, чтобы вернуть мне что-то еще.   -  person Caverman    schedule 09.10.2018
comment
@showdev, использование html() сработало. Я должен был знать это. Я не знал, что text() заменил все только текстом, так что это полезно знать на будущее.   -  person Caverman    schedule 09.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Метод text() заменяет все текстовое содержимое, включая элемент значка.
Похоже, вы мы выбрали html() для одновременной замены элемента значка и текстовой метки.

Другим альтернативным решением является изменение определенного текстового узла элемента с помощью contents().
Я нашел эту идею в этом ответе от charlietfl.

Обратите внимание, что в моем примере ниже на страницу добавляются повторяющиеся идентификаторы. Но это только для демонстрации, учитывая, что вы не можете изменить HTML-код, возвращенный вашим ответом.

var response = [
  `<div class="alert-success" id="valid-flag">
     <i class="fas" id="valid-icon"></i> ???
   </div>`,
  `<div class="alert-danger" id="valid-flag">
     <i class="fas" id="valid-icon"></i> ???
   </div>`
];

function processResponse(response) {

  var $html = $(response);

  if ($html.hasClass('alert-success')) {

    $html.contents().last()[0].textContent = 'Yes';
    $html.removeClass().addClass('validation__text-success');
    $('#valid-icon', $html).removeClass().addClass('fas fa-check-circle');

  } else if ($html.hasClass('alert-danger')) {

    $html.contents().last()[0].textContent = 'No';
    $html.removeClass().addClass('validation__text-danger');
    $('#valid-icon', $html).removeClass().addClass('fas fa-frown');

  }

  $('body').append($html);

}


$.each(response, function(i, v) {
  processResponse(v);
});
.validation__text-success {
  background-color: lightgreen;
}

.validation__text-danger {
  background-color: pink;
}

#valid-icon {
  margin: 0 .5em 0 0;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

person showdev    schedule 09.10.2018
comment
На самом деле я просто использовал следующий $(#valid-flag).html('‹i class=fas fa-times-octagon›‹/i› No'); ИЛИ $(#valid-flag).html('‹i class=fas fa-check-circle›‹/i› Yes'); - person Caverman; 09.10.2018