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
    Commented 31 мая 2017 в 11:39
  • Я не стал загромождать код показывая переменную, поскольку это не относится к вопросу.. переменная нужна для определения какой див был нажат, далее она записывается в LS и выводится в определенном css файле, где и задаётся фон, используя if переменная равна "1", то... если "2", то...
    – user250973
    Commented 31 мая 2017 в 11:41
  • Для этого не нужна переменная. Вместо значения переменной меняйте класс нужному элементу сразу
    – user212578
    Commented 31 мая 2017 в 11:49
  • Подозреваю, что скрипт с условием отрабатывает при загрузке страницы на текущее значение переменной, и то, что её значение поменялось уже после - роли не играет
    – user212578
    Commented 31 мая 2017 в 11:54
  • 1
    Так запихайте условие в функцию и выполняйте её при клике на див
    – user212578
    Commented 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_
    Commented 31 мая 2017 в 20:29
  • Лучше не стоит.
    – Arnial
    Commented 31 мая 2017 в 20:30
  • 1
    Если нажать на синий, затем на зелёный, затем снова на синий. То в конце фон должен быть синим. Если делать через classList.add - то последний синий не добавится, т.к. уже будет у элемента после первого нажатия ( не уверен что и зелёный сработает, из-за того, что он просто будет добавлен в конец class атрибута). Если очень хочется использовать classList.add то нужно удалять старые классы фонов. Чтобы не заморачиватся с этим проще использовать className.
    – Arnial
    Commented 31 мая 2017 в 20:33
  • да, точно. не обратил внимания. конечно было бы лучше хранить ссылки в хранилище, нежели классы
    – webDev_
    Commented 31 мая 2017 в 20:37
  • @webDev_ , конечно, даже выкинуть ссылки на изображения из CSS и подставлять прямо из HTML, но это всё уже на усмотрение автора вопроса.
    – br3t
    Commented 31 мая 2017 в 20:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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