я не могу изменить bg-цвет карт при переключении - PullRequest
Новая
       6

я не могу изменить bg-цвет карт при переключении

2 голосов
/ 19 апреля 2020

Вот часть кода HTML:
fb@nathanf

1987

F O L L O W E R S
up12 Today

and I created the switch button (it works fine):

<div>
  <h4>Social Media Dashboard</h4>
  <p class="switch-text">Dark Mode</p>
  <div class="custom-control custom-switch mode">
    <input
      type="checkbox"
      class="custom-control-input"
      id="customSwitch"
      onclick="myFunction()"
    />
    <label class="custom-control-label" for="customSwitch"></label>
  </div>
  <p class="followers">Total Followers: 23,004</p>
</div>

Это цвет фона, который я добавил в светлую тему, используя css: 

.box {
  background-color: hsl(227, 47%, 96%);
}

, и это то, что я хочу добавить после нажатия кнопки. нажал: 

.dark-box {
  background-color: hsl(228, 28%, 20%);
}

вот код JS: 

function myFunction() {
  var element = document.body;
  var element1 = document.class('.card');
  element.classList.toggle('dark-mode');
  element1.classList.toggle('dark-box');
}

Теперь, когда я нажимаю на переключатель, карты background-color остаются прежними, они не меняются, я хочу чтобы поменять на .dark-box theme, plz help

Ответы [ 4 ]

1 голос
/ 19 апреля 2020

В javascript нет ничего, что называется document.class(), вместо него можно использовать querySelector(). 

function myFunction() {
  var element = document.body;;
  var element1 = document.querySelector('.card');
  element.classList.toggle("dark-mode");
  element1.classList.toggle("dark-box");
}
.box {
  background-color: hsl(227, 47%, 96%);
}

.dark-box {
  background-color: hsl(228, 28%, 20%);
}
<!DOCTYPE html>



  
  
  JS Bin
fb@nathanf

1987

F O L L O W E R S
up 12 Сегодня

Панель социальных сетей

Темный режим
Всего подписчиков: 23 004
0 голосов
/ 20 апреля 2020

Я нашел решение, только что отредактировал код js: 

function darktheme() {
document.querySelector('body').classList.toggle("dark-mode");
document.querySelectorAll('.box')[0].classList.toggle("dark-box");
document.querySelectorAll('.box')[1].classList.toggle("dark-box");
document.querySelectorAll('.box')[2].classList.toggle("dark-box");
document.querySelectorAll('.box')[3].classList.toggle("dark-box");
document.querySelectorAll('.box')[4].classList.toggle("dark-box");
document.querySelectorAll('.box')[5].classList.toggle("dark-box");
document.querySelectorAll('.box')[6].classList.toggle("dark-box");
document.querySelectorAll('.box')[7].classList.toggle("dark-box");
document.querySelectorAll('.box')[8].classList.toggle("dark-box");
document.querySelectorAll('.box')[9].classList.toggle("dark-box");
document.querySelectorAll('.box')[10].classList.toggle("dark-box");
document.querySelectorAll('.box')[11].classList.toggle("dark-box");

}

Но все же есть ли способ сделать его короче?

0 голосов
/ 19 апреля 2020

вы можете передать событие в myFunction в обработчике события onclick, а затем использовать его для переключения classList. Вот краткий пример из codepen. 

<div class="bg-change" onclick="myFunction(event);"></div>

.bg-change {
  width:400px;
  height:200px;
  border:1px solid #000;
}

.dark-mode {
  background:darkblue;
}

function myFunction(event) {

 const { classList } = event.target;
  classList.toggle("dark-mode");
}

вы можете играть с ним и изменить его в соответствии с вашей ситуацией.

https://codepen.io/jesusfellas/pen/VwvjgrW

0 голосов
/ 19 апреля 2020

document.class не является допустимой функцией. используйте вместо этого один из них:

  • document.querySelector('.card'): возвращает первый элемент class = card
  • document.querySelectorAll('.card'): возвращает все элементы class = card
  • document.getElementsByClassName('card'): возвращает все элементы класса = карта

. Чтобы применить класс темного ящика к каждой из карт, вы можете сделать это: 

function myFunction() {
  const body = document.querySelector('body');
  const cards = document.querySelectorAll('.card');
  body.classList.toggle('dark-mode');
  cards.forEach(card => card.classList.toggle('dark-box'));
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...