javascript - 切换一个按钮 - 也切换另一个按钮

问题描述

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

现在我还有一个问题：

是否有可能，当点击一个开关（无论是哪一个）同时激活/停用另一个？这样状态总是一样的吗？

假设可行：如果我为一个切换设置“输入类型=“复选框”选中”会发生什么？

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);
});
})

谢谢！

标签： javascripttoggle

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

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

关于 Bugzilla 的讨论一直在进行，在 FireFox 和 Chrome 的版本上已经有不同的改变实现，我觉得在使用主题（通过扩展）和管理这个简单的标志之间存在某种混淆正如在 css - js 中所想象的那样。

我仍然在这部分留下了 JS 代码，我在 CSS 中删除了它，因为它没有做任何事情。一切都取决于<body>标签上添加（或不添加）类。

我还清理了你的 CSS，并重做了你的复选框按钮，这些按钮也是无用的复杂

基本代码（没有 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 = 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() )
    });
  })()

javascript - 切换一个按钮 - 也切换另一个按钮

问题描述

解决方案

推荐阅读