javascript - 复选框起作用，但没有动画

Question

我在我的网站的标题导航和移动菜单中使用暗模式切换。两者都按应有的方式运行，但只有 1 会在单击时为开关设置动画。我还希望切换按钮旁边的文本在单击时从“暗”切换到“亮”。任何帮助，将不胜感激。

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); //add this
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); //add this
    }    
}

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

/********** DARK THEME TOGGLE START **********/
    
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
    
.theme-switch-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 10px;
  margin-left: 5px;
  font-size: 9px;
  letter-spacing: 2px;
}
    
[data-theme="dark"] .theme-switch-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 10px;
  margin-left: 5px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #F8F0E3;
}
    
.theme-switch {
  display: inline-block;
  height: 18px;
  position: relative;
  width: 30px;
  margin-top: -4px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #fff;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #121212;
  transition: .4s;
  -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider:before {
  background-color: #000;
  bottom: 1px;
  content: "";
  height: 12px;
  left: 2px;
  position: absolute;
  transition: .4s;
  width: 12px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

input:checked + .slider {
  background-color: transparent;
  border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
  background-color: #F8F0E3;
}

.slider.round {
  border-radius: 34px;
  border: 2px solid #000;
}

.slider.round:before {
  border-radius: 50%;
}
    
.header__toggle {
  position: absolute;
  top: 7px;
  right: 20px;
}
    
@media screen and (max-width: 768px) {    
.header__toggle {
  position: absolute;
  top: 0px;
  right: 10px;
}
}
    
.is-light .site-toggle__link{
   color:#fff!important;
}

[data-theme="dark"] .is-light .site-toggle__link{
   color:#F8F0E3!important;
}
  
[data-theme="dark"] .site-toggle__link{
  color: #000!important;
  color:var(--colorNavText)
}
   
/********** DARK THEME TOGGLE END **********/
    
/********** DARK THEME MOBILE TOGGLE START **********/
    
.theme-switch-mobile-wrapper {
  display: flex;
  align-items: center;
}
    
.theme-switch-mobile-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 13px;
  margin-left: 7px;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 3px;
}
    
[data-theme=dark] .theme-switch-mobile-wrapper p {
    font-family: Arial MT Pro!important;
    margin-top: 13px;
    margin-left: 7px;
    font-size: 24px;
    color: #f8f0e3;
    letter-spacing: 3px;
}
    
.theme-switch-mobile {
    display: inline-block;
    height: 21px;
    position: relative;
    width: 33px;
    margin-top: -4px;
}

.theme-switch-mobile input {
  display:none;
}

.slider-mobile {
  background-color: #fff;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #121212;
  transition: .4s;
  -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider-mobile:before {
    background-color: #000;
    bottom: 1px;
    content: "";
    height: 15px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 15px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

input:checked + .slider-mobile {
  background-color: transparent;
  border: 2px solid #F8F0E3;
}

input:checked + .slider-mobile:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
  background-color: #F8F0E3;
}

.slider-mobile.round-mobile {
  border-radius: 34px;
  border: 2px solid #000;
}

.slider-mobile.round-mobile:before {
  border-radius: 50%;
}

.mobile__toggle {
  position: absolute;
  left: 35%;
  margin-top: -15px;
}
    
@media screen and (max-width: 768px) {    
.mobile__toggle {
  position: absolute;
  left: 35%;
  margin-top: -15px;
}
}
   
/********** DARK THEME MOBILE TOGGLE END **********/

<div class="theme-switch-wrapper header__toggle site-toggle__link">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
    </label>
        <p>DARK</p>
</div>
    
<div class="theme-switch-mobile-wrapper mobile__toggle">
     <label class="theme-switch-mobile" for="checkbox">
        <input type="checkbox" id="checkbox2" />
        <div class="slider-mobile round-mobile"></div>
     </label>
        <p>DARK</p>
</div>

标签： javascriptcheckboxtogglebuttondarkmode

Answer 1

你在js和html中有错误。

1. 在标签中<label class="theme-switch-mobile" for="checkbox2" <input type="checkbox" id="checkbox2"/> </label>
2. const toggleSwitch = document.querySelectorAll('.theme-switch input, .theme-switch-mobile input');代替const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox2"]');
3. querySelectorAll而不是querySelector 那时 toggleSwitch.forEach(e => { e.addEventListener('change', switchTheme, false) } );

const toggleSwitch = document.querySelectorAll('.theme-switch input, .theme-switch-mobile input');

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
        else {
            document.documentElement.setAttribute('data-theme', 'light');
        }
    }

    toggleSwitch.forEach(e => {
            e.addEventListener('change', switchTheme, false)
        }
    );

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            //localStorage.setItem('theme', 'dark'); //add this
        }
        else {
            document.documentElement.setAttribute('data-theme', 'light');
            //localStorage.setItem('theme', 'light'); //add this
        }
    }

    //const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
 const currentTheme = null;

    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);

        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }

/********** DARK THEME TOGGLE START **********/
    
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
    
.theme-switch-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 10px;
  margin-left: 5px;
  font-size: 9px;
  letter-spacing: 2px;
}
    
[data-theme="dark"] .theme-switch-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 10px;
  margin-left: 5px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #F8F0E3;
}
    
.theme-switch {
  display: inline-block;
  height: 18px;
  position: relative;
  width: 30px;
  margin-top: -4px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #fff;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #121212;
  transition: .4s;
  -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider:before {
  background-color: #000;
  bottom: 1px;
  content: "";
  height: 12px;
  left: 2px;
  position: absolute;
  transition: .4s;
  width: 12px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

input:checked + .slider {
  background-color: transparent;
  border: 2px solid #F8F0E3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
  background-color: #F8F0E3;
}

.slider.round {
  border-radius: 34px;
  border: 2px solid #000;
}

.slider.round:before {
  border-radius: 50%;
}
    
.header__toggle {
  position: absolute;
  top: 7px;
  right: 20px;
}
    
@media screen and (max-width: 768px) {    
.header__toggle {
  position: absolute;
  top: 0px;
  right: 10px;
}
}
    
.is-light .site-toggle__link{
   color:#fff!important;
}

[data-theme="dark"] .is-light .site-toggle__link{
   color:#F8F0E3!important;
}
  
[data-theme="dark"] .site-toggle__link{
  color: #000!important;
  color:var(--colorNavText)
}
   
/********** DARK THEME TOGGLE END **********/
    
/********** DARK THEME MOBILE TOGGLE START **********/
    
.theme-switch-mobile-wrapper {
  display: flex;
  align-items: center;
}
    
.theme-switch-mobile-wrapper p {
  font-family: Arial MT Pro!important;
  margin-top: 13px;
  margin-left: 7px;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 3px;
}
    
[data-theme=dark] .theme-switch-mobile-wrapper p {
    font-family: Arial MT Pro!important;
    margin-top: 13px;
    margin-left: 7px;
    font-size: 24px;
    color: #f8f0e3;
    letter-spacing: 3px;
}
    
.theme-switch-mobile {
    display: inline-block;
    height: 21px;
    position: relative;
    width: 33px;
    margin-top: -4px;
}

.theme-switch-mobile input {
  display:none;
}

.slider-mobile {
  background-color: #fff;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #121212;
  transition: .4s;
  -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider-mobile:before {
    background-color: #000;
    bottom: 1px;
    content: "";
    height: 15px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 15px;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

input:checked + .slider-mobile {
  background-color: transparent;
  border: 2px solid #F8F0E3;
}

input:checked + .slider-mobile:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
  background-color: #F8F0E3;
}

.slider-mobile.round-mobile {
  border-radius: 34px;
  border: 2px solid #000;
}

.slider-mobile.round-mobile:before {
  border-radius: 50%;
}

.mobile__toggle {
  position: absolute;
  left: 35%;
  margin-top: -15px;
}
    
@media screen and (max-width: 768px) {    
.mobile__toggle {
  position: absolute;
  left: 35%;
  margin-top: -15px;
}
}
   
/********** DARK THEME MOBILE TOGGLE END **********/

<div class="theme-switch-wrapper header__toggle site-toggle__link">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
    </label>
        <p>DARK</p>
</div>
    
<div class="theme-switch-mobile-wrapper mobile__toggle">
     <label class="theme-switch-mobile" for="checkbox2">
        <input type="checkbox" id="checkbox2" />
        <div class="slider-mobile round-mobile"></div>
     </label>
        <p>DARK</p>
</div>