Javascript OnClick更改CSS内容

我在javascript上有一个简单的函数，当您单击一个名为en的按钮来更改语言时。通过更改text.text可以很好地工作，但我有一个问题，就是我用css和一些文本占位符创建了一个动画。让我给你看看

HTML

<div id="languageWrapper">

            <img id="es" class="spanish" src="images/es.svg"/>
            <img id="en" class="english" src="images/en.svg"/>

</div>

我试图实现的是，在单击id es的同时，将动画关键帧从faderText和faderText2更改为另一个可能具有英语内容的不同动画。这可能吗？提前谢谢

还有我想要实现改变的Javascript。HeaderRapper：在从faderText到FaderExtenglish的动画之后，在创建FaderExtenglish关键帧时，我可以用英语制作它们

---

有人可以帮忙：D？谢谢

单击en时在正文上添加css类英语：

在css中，将其更改为以下内容：

.headerWrapper:after {
content: 'foreign text';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
content: 'english text';
animation: faderTextEn 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderTextEn {
0% {content: "english version";}
33.33% {content: "english version";}
66.66% {content: "english version";}
100% {content: "english version";}
}

---

我将帮助您，但首先我必须警告您，您正在使用CSS为HTML页面提供内容，这是一种不好的使用。顾名思义，CSS是用来设计样式的，它只用于动画，而不用于存储文本等数据

我有一个代码笔解决方案的工作示例

但是，关于您的问题，您不能使用jQuery选择伪元素，例如：after。在这种情况下，您需要使用其他类，如下例所示：

将您的HTML保持为

<div id="languageWrapper">
    <img id="es" class="spanish" src="images/es.svg"/>
    <img id="en" class="english" src="images/en.svg"/>
</div>
<div id="bannerWrapper">
    <div id="textWrapper">
        <h3 class="headerWrapper"></h3><br>
        <h3 class="subheaderWrapper"></h3>
    </div>
</div>

您的jQuery代码应更新如下：

.headerWrapper:after {
    content: 'Header 1';
    animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

.subheaderWrapper:after {
    content: 'Some small description of what We intent to say here in this banner number 1';
    animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
  animation-name: faderTextEnglish;
}

body.en .subheaderWrapper:after {
  animation-name: faderText2English;
}

@keyframes faderText {
    0% {content: "¿Empresa vs Autónomo?";}
    33.33% {content: "¿Qué impuestos paga mi Empresa?";}
    66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
    100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderText2 {
    0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de  negocio";}
    33.33% {content: "Nos encargamos de explicar, preparar y presentar tus impuestos periódicamente";}
    66.66% {content: "Construimos un puente entre la compleja red de tramites al reubicar internacionalmente a un empleado";}
    100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
}

@keyframes faderTextEnglish {
    0% {content: "¿Company?";}
    33.33% {content: "¿LULZ?";}
    66.66% {content: "¿OKAY?";}
    100% {content: "¿NEWTEXT?";}
}

@keyframes faderText2English {
    0% {content: "¿Company Subheader?";}
    33.33% {content: "¿LULZ Subheader?";}
    66.66% {content: "¿OKAY Subheader?";}
    100% {content: "¿NEWTEXT Subheader?";}
}

$(document).ready(function() {
  $('#en').click(function(){
    $('body').addClass('en');
  });

  $('#es').click(function(){
    $('body').removeClass('en');
  });
});

---

请注意，您所做的不是选择：after伪元素然后更改动画，而是选择元素本身并分别附加和删除其他类esText和enText。

$'en'单击HeaderRapper上的添加不同类并基于该类添加css Hello Simon，感谢您的回复！但似乎不起作用，不知道为什么：请您在上创建一个工作场景，然后我可以为您调试：！好的，现在似乎正在工作：D是的，是正确的，非常感谢！！

.headerWrapper:after {
content: 'foreign text';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
content: 'english text';
animation: faderTextEn 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderTextEn {
0% {content: "english version";}
33.33% {content: "english version";}
66.66% {content: "english version";}
100% {content: "english version";}
}

<div id="languageWrapper">
    <img id="es" class="spanish" src="images/es.svg"/>
    <img id="en" class="english" src="images/en.svg"/>
</div>
<div id="bannerWrapper">
    <div id="textWrapper">
        <h3 class="headerWrapper"></h3><br>
        <h3 class="subheaderWrapper"></h3>
    </div>
</div>

.headerWrapper:after {
    content: 'Header 1';
    animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

.subheaderWrapper:after {
    content: 'Some small description of what We intent to say here in this banner number 1';
    animation: faderText2 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
  animation-name: faderTextEnglish;
}

body.en .subheaderWrapper:after {
  animation-name: faderText2English;
}

@keyframes faderText {
    0% {content: "¿Empresa vs Autónomo?";}
    33.33% {content: "¿Qué impuestos paga mi Empresa?";}
    66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
    100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderText2 {
    0% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de  negocio";}
    33.33% {content: "Nos encargamos de explicar, preparar y presentar tus impuestos periódicamente";}
    66.66% {content: "Construimos un puente entre la compleja red de tramites al reubicar internacionalmente a un empleado";}
    100% {content: "Te aconsejamos y creamos la mejor estructura según tu tipo de negocio";}
}

@keyframes faderTextEnglish {
    0% {content: "¿Company?";}
    33.33% {content: "¿LULZ?";}
    66.66% {content: "¿OKAY?";}
    100% {content: "¿NEWTEXT?";}
}

@keyframes faderText2English {
    0% {content: "¿Company Subheader?";}
    33.33% {content: "¿LULZ Subheader?";}
    66.66% {content: "¿OKAY Subheader?";}
    100% {content: "¿NEWTEXT Subheader?";}
}

$(document).ready(function() {
  $('#en').click(function(){
    $('body').addClass('en');
  });

  $('#es').click(function(){
    $('body').removeClass('en');
  });
});