Javascript 使用切换按钮引导更改语言_Javascript_Jquery_Html_Css_Twitter Bootstrap

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

javascript jquery html css twitter-bootstrap

Javascript 使用切换按钮引导更改语言,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在学习使用bootstrap、html、css和js进行编码。我想知道是否可以用切换按钮修改我的网页语言？我使用的是可以设置如下事件的： <input id="toggle-event" type="checkbox" data-toggle="toggle"> <div id="console-event"></div> <script> $(function() { $('#toggle-event').change(func

我正在学习使用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>

您的尝试存在许多问题

最明显的一点是，语言是错误的。您的“en”部分包含法语文本，“fr”部分包含英语文本

与您引用的示例相比，CSS也被破坏了-请更仔细地查看

：lang

部分是如何在原始版本中构造的。在原始示例中，它用于隐藏相反的语言，而您使用它来隐藏相同的语言。你把这个概念理解错了

而且，这句话完全是胡说八道：

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

没有像“.body”这样的jQuery函数-如果您在浏览器控制台中查看（如果您不知道，请按F12打开大多数现代桌面浏览器中的开发人员工具），当您单击切换时，您将看到报告的此错误

“classname”是一个原生JS属性，它不适用于jQuery对象，如果它是有效的，那么它就是无效的

如果可以使用像“body”这样的函数来设置body内容，那么它所要做的就是将整个

部分的内容设置为“Toggle:true”或类似内容。这是没有用的

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

在您给出的链接中，使用

document.body.className

的示例非常有效。您只需要根据切换是打开还是关闭来更改类名。我选择将类名存储在

data-

属性值“true”和“false”中，这当然对应于布尔值的字符串表示形式。这意味着我们可以灵活地使用切换的“checked”属性值来获取正确的

数据-

属性值，并将其用作新的类名，而无需任何繁琐的

if

或

switch

语句：

CSS

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

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

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>

另外，您的JSFIDLE根本不起作用，因为您没有包含jQuery，您的脚本位于错误的部分，您必须将引导等作为外部资源引用—您提供的内联链接指向JSFIDLE环境中不存在的本地资源。我已经为您解决了这个问题，并对其进行了更新，使其能够按照您的意愿工作：