gpt4 book ai didi

jQuery 更改 FontAwesome CSS 不起作用?

转载 作者:行者123 更新时间:2023-11-28 14:42:12 24 4
gpt4 key购买 nike

我有一个 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');
}

最佳答案

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 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52728278/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com