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> 

これら.headerWrapperと.SubheaderWrapperからのテキストは、CSSから来て、私は変更することが達成できないコンテンツがこの1

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

ある言語

を変更するためのボタンですファイル

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変更：faderTextEnglishへfaderTextからアニメーションの後に）faderTextEnglishキーフレームを作成している間、私は英語でそれらを作ることができるので）

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

誰かができます。助け：D？ありがとう！

Answer 1

#enをクリックすると、本体の「英語」の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で擬似要素を選択することはできません。この場合は、次の例のように、追加クラスを利用する必要があります。

は、ヘッダーのための2つである、4つのクラスを作成して、あなたのCSSで、今

<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> 

としてあなたのHTMLを維持し、サブヘッダーはスペイン語で、ヘッダーとサブヘッダーは英語で2つです：.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'); 
    }); 
}); 

代わりに選択するのであることに注意してください：擬似要素の後にして、アニメーションを変更し、何要素自体を選択し、追加のクラス（それぞれesText＃とenText＃）を添付して削除します。