个人中心
gpt4 book ai didi

javascript - 使用切换按钮 Bootstrap 更改语言

转载 作者：太空宇宙 更新时间：2023-11-03 20:30:23 24 4
gpt4 key购买 nike

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

最佳答案

您的尝试存在很多问题。

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

与您引用的示例相比，CSS 也受到了破坏 - 更仔细地查看 :lang部分是在原版中构建的。在原始示例中，它用于隐藏相反 语言，而您使用它来隐藏相同 语言。你把这个概念搞错了。

另外，这句话完全是胡说八道:

$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
  1. 没有像“.body”这样的 jQuery 函数 - 如果您查看浏览器控制台(如果您不知道，请按 F12 打开大多数现代桌面浏览器中的开发人员工具)，您会看到此错误单击切换时报告。
  2. “类名”是原生 JS 属性，它不适用于 jQuery 对象，如果它是有效的话
  3. 如果可以使用像“body”这样的函数来设置正文内容，那么它所做的就是设置整个<body> 的内容。部分到“切换:真”，或类似的。这是没有用的。
  4. 即使所有这些都被忽略，并且它能够设置类(class)，它也只会将其设置为英语 - 您将无法改回法语。

您提供的链接中的示例使用document.body.className工作得很好。您只需要根据开关是打开还是关闭来改变类名。我选择将类名存储在 data- 中属性值“true”和“false”，这当然对应于 bool 值的字符串表示。这意味着我们可以巧妙地使用 toggle 的“checked”属性的值来获取正确的 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());
  });   
});

附言你的 JSFiddle 根本不起作用，因为你没有包含 jQuery，你的脚本在错误的部分，你必须引用 Bootstrap 等作为外部资源 - 你提供的内联链接指向不存在的本地资源在 JSFiddle 环境中。我已经为您修复了该问题，并对其进行了更新，使其按您的预期工作:

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

关于javascript - 使用切换按钮 Bootstrap 更改语言，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43490283/

24 4 0
文章推荐： javascript - 从字形过渡到输入文本？
文章推荐： python - 将tensorflow BERT检查点转换为pytorch时出错
文章推荐： matlab - 在 Matlab 中捕获实时命令窗口输出
文章推荐： c# - 如何使我的图像透明？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com