切换一个按钮-同时切换另一个按钮-前端问题

Toggle one button - toggle the other one as well(切换一个按钮-同时切换另一个按钮)

本文介绍了切换一个按钮-同时切换另一个按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你们以前帮过我。多亏了您，这两个切换现在都起作用了。

现在我还有一个问题：

当点击一个开关(无论是哪一个)时，是否可以同时激活/停用另一个开关？以使状态始终相同？

假设这起作用：如果我为一个切换设置了"；input type="；复选框&check"；，会发生什么情况？

示例： https://jsfiddle.net/zndyf9e6/

const btns = document.querySelectorAll(".btn-toggle-darkmode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
console.log(currentTheme)
  document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-theme");
}

btns.forEach(function(btn){
btn.addEventListener("click", function() {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
    var theme = document.body.classList.contains("light-theme") ?
      "light" :
      "dark";
  } else {
    document.body.classList.toggle("dark-theme");
    var theme = document.body.classList.contains("dark-theme") ?
      "light" :
      "dark";
  }
  localStorage.setItem("theme", theme);
});
})

谢谢！

推荐答案

您不必要地过度复杂化了代码。但在您的辩护中，黑暗模式的管理本身就是一大堆结。我已经就这个问题做了几次测试和研究，我目前的结论是代码window.matchMedia ('(prefers-color-scheme: dark)'). Matches在今天并不是真正可用的。

我在Firefox或Chrome上激活了暗模式，这两个浏览器都没有检测到，无论是在css中，还是在javascript中。除调试模式外，Firefox允许您更改此标志，但这仅在您使用页面时有效。

关于Bugzilla的讨论层出不穷，Firefox和Chrome的不同版本都有不同的实现，我觉得在使用主题(通过扩展)和管理这个简单的标志之间存在某种混淆，就像在css-js中想象的那样。

我仍然将JS代码留在这一部分，我在CSS中删除了它，因为它什么都不做。一切都取决于<body>标记上类的添加(或不添加)。

我还清理了您的css，并重做了您的复选框按钮，这些按钮也很复杂。

基本代码(没有window.matchMedia或localStorage)：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

(function() // IIFE Closure
  {
  const
    darkClass    = 'dark-theme' 
  , darkModeBtns = document.querySelectorAll('label.btn-dark-mode > input[type="checkbox"]')
  , syncBnts     = flag => darkModeBtns.forEach(bt=>bt.checked = flag)
    ;
  let darkMode = false // default 
    ;
  document.body.classList.toggle(darkClass, darkMode ) // init page

  // toggle dark mode via checkboxes
  darkModeBtns.forEach( bt=>
    {
    bt.checked = darkMode // init page
    bt.oninput =_=>
      {
      document.body.classList.toggle(darkClass, bt.checked )
      syncBnts(bt.checked )
      }
    })
  })()

:root {
  --background   : #f7f7f8;
  --main         : #ffffff;
  --border       : #e0e4e7;
  --text         : #244357;
  --link         : #0f6c9e;
  --button-hover : #e8ebf0;
}
body {
  background-color : var(--background);
  padding-top      : 15px;
  padding-bottom   : 15px;
  color            : var(--text);
  font-family      : sans-serif;
  line-height      : 1.75;
  }
body.dark-theme {
  --background   : #18191a;
  --main         : #242526;
  --border       : #30343a;
  --text         : #909090;
  --link         : #ffffffd7;
  --button-hover : #26292e;
  }

label.btn-dark-mode > input { display: none; }
label.btn-dark-mode {
  display       : inline-block;
  position      : relative;
  width         : 40px;
  height        : 20px;
  margin        : 0 auto;
  border-radius : 40px;
  border        : 1px solid var(--border);
  overflow      : hiden;
  cursor        : pointer;
  }
label.btn-dark-mode::before, 
label.btn-dark-mode::after {
  position         : absolute;
  display          : block;
  border-radius    : 50%;
  content          : ' ';
  overflow         : hiden;
  }
label.btn-dark-mode::before {
  top              : 3px;
  left             : 2px;
  width            : 14px;
  height           : 14px;
  background-color : var(--link);
  transition       : 0.5s ease transform, 0.2s ease background-color;
  }
body.dark-theme label.btn-dark-mode::before {
  transform        : translateX(22px);
  }
label.btn-dark-mode::after {
  top              : -8px;
  left             : 0px;
  width            : 15px;
  height           : 15px;
  background-color : var(--background);
  transition       : transform ease 0.5s;
  transform        : scale(0);
  }
body.dark-theme label.btn-dark-mode::after {
  transform        : scale(1) translate(18px,8px);
  }

<label class="btn-dark-mode"><input type="checkbox"></label>
<label class="btn-dark-mode"><input type="checkbox"></label>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, 
  dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas 
  ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, 
  enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque 
  vitae, consequat in, pretium a, enim. Pellentesque congue.
</p>


<label class="btn-dark-mode"><input type="checkbox"></label>

完整JS代码(包含window.matchMedia和LocalStorage)：

(function() // IIFE Closure
  {
  const
    darkClass    = 'dark-theme' 
  , darkModeBtns = document.querySelectorAll('label.btn-dark-mode > input[type="checkbox"]')
  , syncBnts     = flag => darkModeBtns.forEach(bt=>bt.checked = flag)
    ;
  let darkMode = !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    ;
  darkMode = JSON.parse( localStorage.getItem(darkClass) || darkMode.toString() )

  document.body.classList.toggle(darkClass, darkMode ) // init page

  // toggle dark mode via checkboxes
  darkModeBtns.forEach(bt=>
    {
    bt.checked = darkMode // init page
    bt.oninput =_=>
      {
      document.body.classList.toggle(darkClass, bt.checked )
      syncBnts(bt.checked )
      localStorage.setItem(darkClass, bt.checked.toString() )
      }
    })

  // toggle dark mode via browser preference
  window
  .matchMedia('(prefers-color-scheme: dark)')
  .addListener(e =>
    {
    syncBnts( e.matches )
    document.body.classList.toggle(darkClass, e.matches )
    localStorage.setItem(darkClass, e.matches.toString() )
    });
  })()

这篇关于切换一个按钮-同时切换另一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！