1

Сейчас у меня есть два дива, по нажатию на которых меняется значение переменной. И в зависимости от этого значения меняется background фона сайта. Делается это так:

document.body.classList.add('n1');

body.n1 {
    background-image: url("/images/fon/43.jpg");
}

Но само изменение происходит лишь после обновления страницы, поэтому мне пришлось сделать див внутри пустой ссылки:

<a href="">
    <div id="fon2" class="fon2">
        <img src="/images/main3.jpg" alt="текст">
    </div>
</a>

Можно ли сделать смену фона без обновления страницы?

13
  • А где тут переменная?Зачем переменная, если можно сразу менять класс?
    – user212578
    31 мая 2017 в 11:39
  • Я не стал загромождать код показывая переменную, поскольку это не относится к вопросу.. переменная нужна для определения какой див был нажат, далее она записывается в LS и выводится в определенном css файле, где и задаётся фон, используя if переменная равна "1", то... если "2", то...
    – user250973
    31 мая 2017 в 11:41
  • Для этого не нужна переменная. Вместо значения переменной меняйте класс нужному элементу сразу
    – user212578
    31 мая 2017 в 11:49
  • Подозреваю, что скрипт с условием отрабатывает при загрузке страницы на текущее значение переменной, и то, что её значение поменялось уже после - роли не играет
    – user212578
    31 мая 2017 в 11:54
  • 1
    Так запихайте условие в функцию и выполняйте её при клике на див
    – user212578
    31 мая 2017 в 12:17

1 ответ 1

1

Внёс несколько модификаций в ваш код. Кликабельные элементы объединены в один класс .fon, благодаря чему можно навесить обработчик события клика в цикле. Т.е. при добавлении нового "квадратика" вам не нужно будет добавлять код для него в js. Убраны ссылки за ненадобностью, так и не понял, какая у вас с ними проблема. Переменную и функции переименовал в более понятные. Обратите внимание на то, что работа с localStorage завернута в блоки try-catch из-за ограничений в сниппетах на StackOverflow. Из-за этих же ограничений сохранение фона и не работает. Пример без try-catch и с работающим сохранением есть на https://jsfiddle.net/br3t/uttj8foy/ .

var backgroundClass = 'n1';
//* Сохранение выбранного фона в localStorage
function saveBackground() {
  try {
    localStorage.setItem("object", backgroundClass);
  } catch (e) {};
}
//* Чтение фона из localStorage и применение
function getBackground() {
  try {
    if (localStorage.getItem("object")) {
      backgroundClass = localStorage.getItem("object");
    }
  } catch (e) {};
  appendBackground();
}
//* Применение фона к body
function appendBackground() {
  document.body.className = backgroundClass;
}
getBackground();
//* обработка кликов по образцам
var backgrounds = document.querySelectorAll('.fon');
for(var i = 0; i < backgrounds.length; i++) {
  backgrounds[i].addEventListener('click', function() {
    backgroundClass = this.getAttribute('data-class');
    saveBackground();
    appendBackground();
  });
}
body {
  min-width: 640px;
  min-height: 480px;
}

.fon {
  width: 50px;
  height: 50px;
  border: 3px solid #FFF;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  margin: 10px;
}

body.n1 {
  background-image: url("https://via.placeholder.com/300/F00/FFF");
}

body.n2 {
  background-image: url("https://via.placeholder.com/300/0F0/FFF");
}

body.n3 {
  background-image: url("https://via.placeholder.com/300/00F/FFF");
}

body.n4 {
  background-image: url("https://via.placeholder.com/300/FF0/FFF");
}
<div id="fon1" class="fon" data-class="n1">
  <img src="https://via.placeholder.com/300/F00/FFF" alt="текст">
</div>

<div id="fon2" class="fon" data-class="n2">
  <img src="https://via.placeholder.com/300/0F0/FFF" alt="текст">
</div>

<div id="fon3" class="fon" data-class="n3">
  <img src="https://via.placeholder.com/300/00F/FFF" alt="текст">
</div>
<div id="fon4" class="fon" data-class="n4">
  <img src="https://via.placeholder.com/300/FF0/FFF" alt="текст">
</div>

8
  • думаю лучше .className = backgroundClass заменить на .classList.add(backgroundClass)
    – webDev_
    31 мая 2017 в 20:29
  • Лучше не стоит.
    – Arnial
    31 мая 2017 в 20:30
  • 1
    Если нажать на синий, затем на зелёный, затем снова на синий. То в конце фон должен быть синим. Если делать через classList.add - то последний синий не добавится, т.к. уже будет у элемента после первого нажатия ( не уверен что и зелёный сработает, из-за того, что он просто будет добавлен в конец class атрибута). Если очень хочется использовать classList.add то нужно удалять старые классы фонов. Чтобы не заморачиватся с этим проще использовать className.
    – Arnial
    31 мая 2017 в 20:33
  • да, точно. не обратил внимания. конечно было бы лучше хранить ссылки в хранилище, нежели классы
    – webDev_
    31 мая 2017 в 20:37
  • @webDev_ , конечно, даже выкинуть ссылки на изображения из CSS и подставлять прямо из HTML, но это всё уже на усмотрение автора вопроса.
    – br3t
    31 мая 2017 в 20:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.