Question

我正在学习用bootstrap，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关于使用element.lang更改语言。

我无法通过点击切换按钮“混合”两种方法来改变deman上的语言，我不明白为什么= /

这是我的尝试：

<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

您的尝试存在许多问题。

最明显的一点是语言是错误的。你的＆＃34; en＆＃34;部分包含法语文本，以及＆＃34; fr＆＃34;一个包含英文文本！

与你引用的例子相比，CSS也被破坏了 - 更仔细地看看:lang部分是如何在原文中构建的。在原始示例中，它用于隐藏相反的语言，而您使用它来隐藏相同的语言。你的概念是错误的。

此外，这一行完全是胡说八道：

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

没有像＃34; .body＆＃34;这样的jQuery功能。 - 如果您查看浏览器控制台（按F12，如果您不知道，要在大多数现代桌面浏览器中打开开发人员工具），当您单击切换时，您会看到报告此错误。
＆＃34;类名＆＃34;是一个原生的JS属性，它不适用于jQuery对象，如果它是有效的话，这将是有用的
如果 可以使用＆＃34; body＆＃34;等功能。要设置正文内容，它所要做的就是将整个<body>部分的内容设置为＆＃34;切换：true＆＃34;或类似内容。这没用。

即使所有这些都被忽略了，并且它能够设置课程，它只能将它设置为英语 - 你将无法改回法语。

您使用document.body.className提供的链接中的示例效果非常好。您只需根据切换是打开还是关闭来改变类名。我选择将类名存储在data-属性值＆＃34; true＆＃34;和＆＃34; false＆＃34;，这当然对应于布尔值的字符串表示。这意味着我们可以巧妙地使用＆＃34;检查＆＃34;的价值。切换的属性，用于获取正确的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>

<强> JS

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

P.S。你的JSFiddle根本不起作用，因为你没有包含jQuery，你的脚本在错误的部分，你必须引用bootstrap等作为外部资源 - 你提供的内联链接指向本地资源不存在于JSFiddle环境中。我已经为您解决了这个问题，并对其进行了更新，以便按照您的意愿运行：

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

使用切换按钮引导程序更改语言

1 个答案: