jquery - 只有最后一个 CSS ::after 选择器适用于 jQuery .addClass

Question

在多语言网站中，有一个简单的 jQuery .click 事件，可以在搜索按钮上添加一个类。

意大利语网站上添加了“load_IT”类，英文网站上添加了“load_EN”类。

意大利语版：

$("#doSearch").click(function() {
  $("#doSearch").last().addClass("load_IT");
});

英文版：

$("#doSearch").click(function() {
  $("#doSearch").last().addClass( "load_EN" );
});

jQuery 似乎一切正常，该类已成功添加到网站的两个版本中。

这两个类都有一个简单的 CSS ::after 选择器，如示例（两个网站的 .css 文件相同）：

.load_IT::after {
    content: 'Caricamento...';
    -o-animation: bookingBlink 1s linear infinite;
    -ms-animation: bookingBlink 1s linear infinite;
    -moz-animation: bookingBlink 1s linear infinite;
    -webkit-animation: bookingBlink 1s linear infinite;
    top: 8px;
}

.load_EN::after {
    content: 'Loading...';
    -o-animation: bookingBlink 1s linear infinite;
    -ms-animation: bookingBlink 1s linear infinite;
    -moz-animation: bookingBlink 1s linear infinite;
    -webkit-animation: bookingBlink 1s linear infinite;
    top: 8px;
}

@keyframes bookingBlink {
    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

@-webkit-keyframes bookingBlink {
    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

现在的问题是唯一的最后一个有效。

如果在 CSS 文件中我首先编写“load_IT”类，然后编写“load_EN”类，则只有最后一个可以工作（load_EN），并且在英文网站上一切正常。

如果在 CSS 文件中我先编写“load_EN”类，然后编写“load_IT”类，那么只有最后一个可以工作（load_IT），意大利网站上的一切都很好。

很奇怪，为什么会这样？

• 已经尝试过：
  • 切换类的顺序。
  • 将一个类放在 CSS 的顶部，另一个放在底部。
  • 完全更改类名称。
  • 删除动画。
  • 使用 :after (CSS2) 和 ::after(CSS3)
  • 在一个类上使用 ::before，在另一类上使用 ::after。

为了更好地了解正在发生的事情，我还尝试直接在 html 中将类添加到按钮中。不幸的是，问题是一样的，我认为这不是 jQuery 问题。

JSFiddle 示例

https://jsfiddle.net/e3dc6o48/3/

在 JSFiddle 中它可以工作，很明显问题出在我的代码中。问题可能出在哪里？在 CSS 中还是在 HTML 文件中？

标签： jqueryhtmlcss