jquery - 如何使用 css 或 jQuery 编辑焦点上的伪元素

Question

您好，我想在单击输入字段时删除伪 :after 元素。我知道我应该使用 :focus 但由于某些原因我无法让它工作。

这是 HTML:

<li id="field_1_1">
    <div class="ginput_container">
        <input name="input_1" id="input_1_1" type="text">
        ::after
    </div>
</li>

:after 元素是由这个 css 引起的:

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}

我的目标是在用户单击输入字段时删除此 :after 元素。我已经尝试过 CSS 和 jQuery，但都无法正常工作。

这是我尝试使用 CSS 的结果:

#footer-form #input_1_1:focus #field_1_1 .ginput_container_text:after {
    display: none;
}

这是我尝试使用 jQuery 的结果:

jQuery("#field_1_1").click(function(){
    jQuery("#field_1_1 .ginput_container_text:after").remove();
});

有人有什么建议吗？

谢谢

Answer 1

您不能在 jQuery 中修改伪元素。您最好的选择是用一个额外的类来修改 CSS 中的伪元素，指示该元素的替代状态，然后简单地在 jQuery 中删除或添加该类。

例如，

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}
#field_1_1.clicked .ginput_container_text:after {
    display:none;
}

和

jQuery("#field_1_1").click(function(){
    this.addClass('clicked');
});