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文件中？

只有最后一个CSS :: after选择器可与jQuery .addClass

0 个答案: