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

Question

[Иван Медведев]

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

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

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

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

Пример:

Comments

[Александр]

Оформите в песочницу.

[Иван Медведев]

Александр, готово!

Answer 1

[Александр]

Чтобы менялись стили на переключателе убираем 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.

Comments

[Иван Медведев]

Спасибо большое за предложенное решение!
Пофиксил переключатель и добавил jQuerry в песочницу.

Попробовал по вашей инструкции дополнить скрипт и не получилось, так как мои знания в скриптах близятся к нулю((
Вот что получилось:

[Александр]

Иван Медведев,

const images = [
    {
      selector: '#img',
      dark: 'https://dummyimage.com/600x400/fc0/fff',
      light: 'https://dummyimage.com/600x400/0f3/fff'
    }    
];

function swapImages() {
    const isDark = $('.light').hasClass('dark');
    for (let image of images) {
      $(image.selector).attr('src', isDark ? image.dark : image.light);
    }
}

$(document).ready(function () {
    $(".checkbox").click(function(){
        $(".light").toggleClass("dark");
        swapImages();
    });
    swapImages();
});

В images складываете объекты типа { selector, dark, light }

[Иван Медведев]

Александр, спасибо! Все работает! Если мне надо несколько изображений менять таким образом, то в images нужно для каждого изображения свой селектор или можно один для всех, а через запятую все изображения?
Что-то я крутил-вертел и ничего не получил. Извините за тупость, но все же прошу помочь уже до конца)

const images = [
    {
      selector: '#img',
      dark: 'https://dummyimage.com/600x400/fc0/fff',
      light: 'https://dummyimage.com/600x400/0f3/fff',
      dark: 'https://dummyimage.com/600x400/0f3/fff',
      light: 'https://dummyimage.com/600x400/fc0/fff'
    }    
];

[Александр]

Иван Медведев,

const images = [
    {
        selector: 'Селектор_Элемента_1',
        dark: 'URL_Темной_Картинки_1',
        light: 'URL_Светлой_Картинки_1',
    },
    {
        selector: 'Селектор_Элемента_2',
        dark: 'URL_Темной_Картинки_2',
        light: 'URL_Светлой_Картинки_2',
    },
    {
        selector: 'Селектор_Элемента_3',
        dark: 'URL_Темной_Картинки_3',
        light: 'URL_Светлой_Картинки_3',
    }
];

и так далее.

[Иван Медведев]

Александр, благодарю! Все ок! Скажите, как лучше изучать Java Script, чтобы не только теория, но и с применением на практике?

Сколько не пробовал курсов и т.д. - везде теория, которая моментально из головы вылетает. А ведь хочется закреплять знания на практике. Может посоветуете действенные ресурсы?

[Александр]

Иван Медведев, Курсы не проходил, хорошо написано на learn.javascript.ru

[Иван Медведев]

Александр, спасибо большое! Могу я попросить помощи еще в одной задаче на сайте?