使用開關按鈕引導程序更改語言

我正在學習使用引導程序，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>

而且我還看到this thread on stack有關更改languageusing element.lang。

而且我不能「混」的兩種方法只需通過點擊切換按鈕來改變德曼的語言，我不明白爲什麼=/

這裏是我的嘗試：

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

沒有這樣的jQuery的功能「體」 - 如果你在瀏覽器控制檯看（按F12，如果你不知道，要在大多數現代桌面瀏覽器中打開開發人員工具），您將看到單擊切換時報告的錯誤。
「類名」是土生土長的JS性能，它不會對jQuery的對象，這將是，如果它是有效的工作
如果是可以使用的功能，如「身體」定身內容，它所要做的就是將整個<body>部分的內容設置爲「切換：真」或類似內容。這將是無用的。
即使所有這些都被忽略，並且它可以設置課程，但它只會將其設置爲英語 - 您將無法更改回法語。

在給出的鏈接中使用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

@卡普沒問題。如果答案對您有幫助，請記住標記爲已接受和/或已贊成 - 謝謝:-) – ADyson

使用開關按鈕引導程序更改語言

回答

相關問題