我正在执行一个 ajax 调用,试图将一个类添加到 DOM 元素,然后更改该类的属性值。
我可以添加类,但不能更改属性。
<script>
function load_to_be_analysed_count() {
$.ajax({
url: 'experiments/to_be_analysed/count',
dataType: 'text',
type: 'get',
success: function(data) {
// data is the number of experiments to be analysed, returned from server
if (data >= 0) {
$('#new_experiments').addClass('badger');
console.log($('.badger').css('content')); // DEBUG
$('.badger').css('content', data);
}
},
error: function () {
$('#login-language').html('<p>An error ocurred</p>'); // TODO: just for debug. Maybe console.log
}
});
if ($('#new_experiment').hasClass('badger')) {
$('.badger')
}
}
$(function () {
load_to_be_analysed_count()
})
</script>
HTML 之前:
<i id="new_experiments" class="fa fa-bell fa-2x icon-grey"></i>
当我加载页面时,Inspector 在 console.log($('.badger').css('content')); 时显示
已达到。none
//DEBUG
在 Inspector 中,我可以看到上面的 HTML 更改为
之后的 HTML:
<i id="new_experiments" class="fa fa-bell fa-2x icon-grey badger" style=""></i>
CSS:
i#new_experiments {
width: 50px;
text-align: center;
vertical-align: middle;
position: relative;
}
.badger:after{
content: "50";
position: absolute;
background: red;
height: 2rem;
top: -0.2rem;
right: 0.2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
最佳答案
关于这个post您不能在 jQuery 中访问 :before 和 :after,因为它们不是 DOM 的一部分。 content 属性仅适用于这两个伪类。
我认为你必须改变你的结构。一种可能性是创建一个具有 position: relative/absolute 的元素而不使用 :after/:before 然后做类似的事情:
$('.badger').html(data);
关于javascript - ajax 调用后无法更改 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44702444/