OnClick更改CSS內容

Question

當您單擊名爲「en」的按鈕來更改語言時，我在JavaScript上有一個簡單的功能。通過更改文本.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> 

這些更改語言

我不能達到改變內容的按鈕是這個

<div id="bannerWrapper"> 
     <div id="textWrapper"> 
      <h3 class="headerWrapper"></h3><br> 
      <h3 class="subheaderWrapper"></h3> 
     </div> 
</div> 

的從.headerWrapper和.SubheaderWrapper文本來自於CSS文件

CSS 

.headerWrapper { 
position: relative; 
color: #fff; 
margin: 0 auto; 
font-family: 'Montserrat', sans-serif; 
font-size:40px; 
} 

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

.subheaderWrapper { 
position: relative; 
color: #fff; 
margin: 0 auto; 
font-family: 'Raleway', sans-serif; 
font-size:17px; 
} 

.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; 
} 

@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";} 
} 

我想實現的是，雖然點擊ID #es來將動畫關鍵幀從faderText和faderText2更改爲另一個與英文內容不同的動畫。這可能嗎？提前致謝！！

而且，這裏是我的JavaScript，我想實現（改變.headerwrapper：從faderText到faderTextEnglish動畫後），所以在創建faderTextEnglish關鍵幀，我可以讓他們在英語）

$('#en').click(function(){ 
$('.headerWrapper:after').css('animation','faderTextEnglish 30s cubic-bezier(.8,0,0,.8) infinite'); 
}); 

有人能。幫助：d？謝謝！點擊#en當

Answer 1

新增CSS類的身體「英語」：

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

和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";} 
} 

Answer 2

我會幫助你，但首先我必須通過使用它爲HTML頁面提供內容來警告您對CSS所做的不當使用。顧名思義，CSS僅用於樣式（包括動畫），而不用於存儲數據，如文本。

我有一個在CodePen上的解決方案的工作示例。 View it here

但是，關於您的問題，您不能使用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> 

現在，在你的CSS，創建四個班，在兩個頁眉和西班牙語中的subheader和英語中的header和subheader：.enTextHeader，.enTextSubheader，.esTextHeader，.esTextSubheader。你的CSS應該如下：

.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?";} 
} 

jQuery代碼應更新如下：

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

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

請注意，而不是選擇：after僞元素，然後改變動畫，你do是選擇元素本身並附加並刪除其他類（分別是esText＃和enText＃）。