jQuery to Change FontAwesome CSS 不起作用?

Question

我有一个MVC项目，我正在使用Ajax来更新包含FontAwesome 5图标的视图部分。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()方法替换所有文本内容，包括 icon 元素。
您似乎已选择html()同时替换图标元素和文本标签。

另一种替代解决方案是使用contents()修改元素的特定文本节点。
我在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>