Laravel中Ajax订阅提交成功后如何修改按钮伪元素的content属性

核心原因 #

CSS伪元素不属于真实DOM节点，无法通过jQuery选择器直接选中修改样式，因此你原有直接操作:before伪元素的代码不会生效。

解决方案 #

1. 新增状态类对应的CSS规则

在原有CSS基础上新增订阅成功状态的专属样式，利用类选择器优先级覆盖原有伪元素配置：

.newsletter-block .newsletter-content .content button.subscribed:before
{
  content: "\e080";
}

2. 修改Ajax成功回调逻辑

不需要尝试选中伪元素，只需要给目标按钮添加上面定义的subscribed类即可触发样式切换：

success: function (json) {
   container.find('.newsletter-notification').addClass('success').html("You've successfully subscribed to Newsletter.");
   $('.newsletter-block .newsletter-content .content button').addClass('subscribed');
},

如果后续需要重置回邮件图标，调用removeClass('subscribed')即可还原。

内容的提问来源于stack exchange，提问作者Muhammad Shahzaib