トグルボタンのブートストラップで言語を変更する

私はブートストラップ、html、css、jsを使ってコードを学習しています。トグルボタンでウェブページの言語を変更することが可能かどうかは疑問です。私はこのようなイベントを設定できるbootstrap toggleを使用しています：トグルボタンのブートストラップで言語を変更する

<input id="toggle-event" type="checkbox" data-toggle="toggle"> 
<div id="console-event"></div> 
<script> 
    $(function() { 
    $('#toggle-event').change(function() { 
     $('#console-event').html('Toggle: ' + $(this).prop('checked')) 
    }) 
    }) 
</script>

を私もlanguageusingのelement.langの変更についてthis thread on stackを見ました。

そして、私は単純にトグルボタンをクリックすることでdemanの言語を変更するには2つの方法「ミックス」にできないんだけど、なぜ=/

私は理解していないここに私の試みです：

<script src="js/jquery-3.2.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-toggle.min.js"></script> 

<body class="fr" id="test1"> 
    <p lang="en"> 
    Je parle la baguette 
    </p> 
    <p lang="fr"> 
    I speak the baguette 
    </p> 
    <input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En"> 
<!--<script> 
     $(function() { 
     $('#toggle-event').bootstrapToggle({ 
     on: document.body.className= 'fr', 
     off: document.body.className = 'en' 
     }); 
     }) 
</script>--> 
<script> 
    $(function() { 
    $('#toggle-event').change(function() { 
    $('#test1').body('Toggle: ' + $(this).prop('checked')).className='en' 
    }); 
}); 
</script> 
</body>

CSS：

body.en :lang(en) { 
    display: none; 
} 
body.fr :lang(fr){ 
    display: none; 
}

https://jsfiddle.net/mttkchfc/1/

出典

2017-04-19 Kapu

なぜ正確にあなたが「それらを混在させる」ことができませんか？少なくともあなたの試みを示して、それを修正するのに役立つかもしれません。 – ADyson

私はこのスイッチボタンを試してみるのに使うコードです：[JSFiddle]（https://jsfiddle.net/mttkchfc/1/）。 – Kapu

があります。あなたの試みの問題の数。

最も明白なのは、言語が間違った方法であることです。あなたの "en"セクションにはフランス語のテキストが含まれ、 "fr"には英語のテキストが含まれています。

CSSはまた、あなたが引用した例に比べてマングルされています。:langの部分がオリジナルでどのように構築されているかを詳しく見てください。元の例では、とは逆の言語を隠すのに使用されていますが、と同じ言語を隠すために使用しています。あなたはコンセプトを間違った方向に持っています。

また、このラインは総ナンセンスです：

$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'

「.body」というようなjQueryの機能はありません - あなたは（F12キーを押し、あなたが知らなかった場合は、ブラウザのコンソールで見れば、最新のデスクトップブラウザでデベロッパーツールを開く場合）、トグルをクリックするとこのエラーが表示されます。
「クラス名は」ネイティブJSプロパティで、が身体を設定するために、「体」のような機能を使用する可能であった場合、それは
有効であったならば、これはされるであろう、jQueryのオブジェクトでは動作しません。内容は、<body>セクション全体の内容を「Toggle：true」などに設定するだけです。これは役に立たないでしょう。
それらのすべてが無視され、クラスを設定することができたとしても、それを英語に設定するだけです。フランス語に戻すことはできません。

あなたが与えたリンクの例は、document.body.classNameを使用するとうまくいきます。トグルがオンかオフかによって、クラス名を変更するだけです。私はクラス名をdata-の属性値 "true"と "false"に格納することを選択しました。これはもちろんブール値の文字列表現に対応しています。これは、私たちがきちんと正しいdata-属性値を取得するためにトグルの「チェックする」プロパティの値を使用して使用することができることを意味し、新しいクラス名として、任意の退屈ifまたはswitch文なし：

CSS

body.en :lang(fr) { 
    display: none; 
} 
body.fr :lang(en){ 
    display: none; 
}

HTML

<body class="en"> 
    <p lang="fr"> 
    Je parle la baguette 
    </p> 
    <p lang="en"> 
    I speak the baguette 
    </p> 

    <input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="English" data-off="French" data-true="en" data-false="fr" > 
</body>

$(function() { 
    $('#toggle-event').change(function() { 
    document.body.className = $(this).data($(this).prop("checked").toString()); 
    }); 
});

P.S. JSFiddleはjQueryを含まず、スクリプトが間違ったセクションにあり、外部リソースとしてブートストラップなどを参照する必要があり、存在しないローカルリソースJSFiddle環境で動作します。私はあなたのためにすることを固定し、プラスあなたが意図したとおり、それは動作しますので、それを更新しました：

https://jsfiddle.net/mttkchfc/4/

出典

2017-04-20 09:23:20 ADyson

よろしくお願いします。 – Kapu

@カッパの問題はありません。答えがあなたを助けてくれたなら、受け入れられたとマークするか、またはupvoteすることを忘れないでください - ありがとう:-) – ADyson

トグルボタンのブートストラップで言語を変更する

答えて

関連する問題