切換一個按鈕 - 切換另一個按鈕

Question

你們以前幫過我。 多虧了你，兩個開關現在都在工作。

現在我還有一個問題：

是否有可能在單擊切換開關（無論是哪個）時同時激活/停用另一個？ 以便狀態始終相同？

假設可行：如果我為一個切換設置“input type="checkbox" checked"會發生什么？

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

謝謝你！

Answer 1

您不必要地使代碼過於復雜。 但在你的辯護中，暗模式的管理本身就是一個難題。 我對這個問題做了幾次測試和研究，我目前的結論是代碼window.matchMedia ('(prefers-color-scheme: dark)'). Matches window.matchMedia ('(prefers-color-scheme: dark)'). Matches在今天並不是真的有用。

我在 FireFox 或 Chrome 上激活了黑暗模式，這兩個瀏覽器都沒有被檢測到，css 和 javascript 都沒有檢測到。除了調試模式，firefox 允許您更改此標志，但這僅在您使用頁面時有效.

關於 Bugzilla 的討論一直在進行，在 FireFox 和 Chrome 的版本上有不同的更改實現，我覺得使用主題（通過擴展）和管理這個簡單標志之間存在某種混淆正如 css 中想象的那樣 - js。

這部分我還是留下了JS代碼，我在CSS刪除了它，因為它什么都不做。 一切都取決於在<body>標簽上添加（或不添加）class。

我還清理了你的 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() )
    });
  })()

切換一個按鈕 - 切換另一個按鈕

問題描述

1 個解決方案

解決方案1
2 已采納 2021-08-21 23:30:09

切換一個按鈕 - 切換另一個按鈕

問題描述

1 個解決方案

解決方案1 2 已采納 2021-08-21 23:30:09

解決方案1
2 已采納 2021-08-21 23:30:09