jQuery 更改 FontAwesome CSS 不起作用？

Question

我有一个 MVC 元素，我正在使用 Ajax 更新包含 FontAwesome 5 图标的 View 部分。 FontAwesome 是使用 CSS 类设置的，因此我假设我可以轻松删除然后为图标添加 CSS。但是，当我尝试通过 jQuery 更改 CSS 时，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>
}   

这是来自 Ajax 调用的 jQuery。

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');
}

Answer 1

text() method替换所有文本内容，包括图标元素。
您似乎选择了 html()同时替换图标元素和文本标签。

另一种替代解决方案是修改元素的特定文本节点，使用contents() .
我在 this answer 中发现了这个想法通过 charlietfl .

请注意，在我下面的示例中，页面中添加了重复的 ID。但这仅用于演示，因为您无法更改响应返回的 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>