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>

jQuery更改FontAwesome CSS无法正常工作？

1 个答案: