jQuery 更改 FontAwesome CSS 不起作用？

Question

我有一个 MVC 项目，我正在使用该项目 Ajax 来更新包含 FontAwesome 5 图标的视图部分。 FontAwesome 是使用 CSS class 设置的，所以我假设我可以轻松删除然后为图标添加 CSS。但是，当我尝试通过 jQuery 更改 CSS 时，CSS 永远不会设置。 add/remove class 在常规 CSS class 上按预期工作我正在更改但在 FA class 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 by 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>

jQuery 更改 FontAwesome CSS 不起作用？

jQuery to change FontAwesome CSS not working?

jquery

css

font-awesome

font-awesome-5