如何实现一个开关控件，通过开关事件改变内容

Question

我有一个 html 站点也使用 bootstrap 4.4.1。用户应该得到这样的开关 GUI 控件：

通过使用该控件，站点上的内容应该会发生 Javascript 的变化。该站点不应重新加载，因此不会 PHP.

有很多不同的文本，其中应该有替代内容取决于一个开关。

哪个switch GUI元素易于实现和使用？
切换功能和显示/隐藏文本的 Javascript 代码看起来如何？

我很高兴看到指向我获取此信息的教程的链接。

Answer 1

您可以使用Bootstrap默认开关：https://getbootstrap.com/docs/4.5/components/forms/#switches

Javascript 使用 eventListener 并在 change 上检查 <input type="checkbox"> 是否被选中。

var id_switch = document.getElementById('switch');

id_switch.addEventListener('change',function(){
  if(this.checked == true){
    console.log('CHECKED');
  }else{
    console.log('NOT CHECKED');
  }
});

/*DEMO*/body{padding:3rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="custom-control custom-switch">
  <input id="switch" class="custom-control-input" type="checkbox">
  <label class="custom-control-label" for="switch">Toggle this switch element</label>
</div>

如何实现一个开关控件，通过开关事件改变内容

How to implement a switch control and change content by switch event

html

javascript

dom-events