使用切換按鈕引導程序更改語言

Question

我正在學習使用bootstrap，html，css，js進行編碼。 我想知道是否可以使用切換按鈕來修改網頁的語言？ 我正在使用引導程序切換，它可以設置如下事件：

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

而且我還看到了有關在線程中使用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/

Answer 1

您的嘗試有很多問題。

最明顯的是語言是錯誤的方法。 您的“ en”部分包含法語文本，而“ fr”部分包含英語文本！

與您引用的示例相比，CSS也被修改了-更仔細地看一下:lang部分在原始結構中的構造方式。 在原始示例中，它用於隱藏相反的語言，而您正在使用它隱藏相同的語言。 您錯誤地理解了這個概念。

另外，這行完全是胡說八道：

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

沒有這樣的jQuery函數“ .body”-如果您在瀏覽器控制台中查看（如果不知道，請按F12鍵，以在大多數現代桌面瀏覽器中打開“開發人員工具”），當您使用此功能時，會看到此錯誤報告單擊切換。
“ classname”是一個本地JS屬性，不適用於jQuery對象，如果有效則為jQuery對象
如果是可以使用的功能，如“身體”來設置主體內容，所有它會做的是集全的內容<body>節“切換：真”，或者類似的。 這將是無用的。
即使所有這些都被忽略，並且能夠設置類，也只能將其設置為英語-您將無法改回法語。

使用document.body.className給出的鏈接中的示例可以很好地工作。 您只需要根據切換是打開還是關閉來更改類名。 我選擇將類名稱存儲在data-屬性值“ true”和“ false”中，它們當然對應於布爾值的字符串表示形式。 這意味着我們可以整齊地使用切換的“ checked”屬性的值來獲取正確的data- attribute值，並將其用作新的類名，而無需任何繁瑣的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>

JS

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

PS您的JSFiddle根本不起作用，因為您沒有包含jQuery，腳本位於錯誤的部分，並且您必須將bootstrap等作為外部資源進行引用-您提供的內聯鏈接指向的本地資源不存在於JSFiddle環境中。 我已經為您修復了該問題，並對其進行了更新，以便它可以按您的預期工作：

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

使用切換按鈕引導程序更改語言

問題描述

1 個解決方案

解決方案1
5 已采納 2017-04-20 09:23:20

使用切換按鈕引導程序更改語言

問題描述

1 個解決方案

解決方案1 5 已采納 2017-04-20 09:23:20

解決方案1
5 已采納 2017-04-20 09:23:20