mediol-name
@mediol-name
Wordpress Developer

Как менять атрибут src при клике на переключатель?

Есть на странице переключатель, который к тегу body добавляет нужный класс. Таким образом я меняю светлое оформление страницы, на темное.

Как мне написать скрипт, чтобы менять атрибут src для определенных изображений?

Еще одна проблема - после подключения скрипта, переключатель не меняет свои стили, когда "чекед" но подстановка нужного класса в тег боди работает.

**Оформил в песочницу, и там скрипт не работает. Я в этом не силен. Буду сверх благодарен, если покажете работающий скрипт.

Пример:
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
Чтобы менялись стили на переключателе убираем return false;
Для изображений можно так сделать:
1. Создаете некое «хранилище» изображений
const images = [
  {
    selector: '#img',
    dark: 'https://dummyimage.com/600x400/fc0/fff',
    light: 'https://dummyimage.com/600x400/0f3/fff'
  },
  ...
];

2. Создаем функцию для переключения изображений
function swapImages() {
  const isDark = $('.light').hasClass('dark');
  for (let image of images) {
    $(image.selector).attr('src', isDark ? image.dark : image.light);
  }
}

2. В скрипт переключения дописываем
$('.checkbox').click(function () {
    $('.light').toggleClass('dark');

    swapImages();
});

4. В $(document).ready дописываем swapImages();

ЗЫ - Чтобы заработал jQuery в песочнице, надо в настройках добавить его - в разделе JS.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы