Задать вопрос
zlobin
@zlobin
Занимаюсь программированием на PHP
javascript

Изменение стиля при помощи javascript

Кто может подсказать как решить задачку

есть 5 блоков div у каждого свой id и стиль b-img

<div id="1" class="b-img" onclick="kodimg(id)">...</div>
<div id="2" class="b-img" onclick="kodimg(id)">...</div>
<div id="3" class="b-img" onclick="kodimg(id)">...</div>
<div id="4" class="b-img" onclick="kodimg(id)">...</div>
<div id="5" class="b-img" onclick="kodimg(id)">...</div>


при клике по нему ява скрипт меняет ему стиль на v-img

вот такой функцией

function kodimg(id)
{
 document.getElementById(id).className = 'v-img';
}


проблема в том, что у предыдущего нажатого div стиль остается v-img, а нужно чтоб он снова стал b-img

Как такое можно сделать?
  • Вопрос задан
  • 36491 просмотр
1 комментарий
Подписаться 3 Оценить 1 комментарий
Решения вопроса 2
apangin
@apangin
1 вариант. Хранить id предыдущего нажатого в (глобальной) переменной.
  var old_id;
  function kodimg(id) {
    if (old_id) document.getElementById(old_id).className = 'b-img';
    document.getElementById(id).className = 'v-img';
    old_id = id;
  }

2 вариант. В функции kodimg сначала у всех div сменить класс на b-img, затем у нужного поставить v-img.
  function kodimg(id) {
    for (var i = 1; i <= 5; i++) document.getElementById(i).className = 'b-img';
    document.getElementById(id).className = 'v-img';
  }

И, независимо от выбранного варианта, почитать для начала книжки и поизучать материал в интернете.
Ответ написан
1 комментарий
1 комментарий
DevMan
@DevMan
Выберите все нужные дивы, а дальше как написано выше.
document.getElementById('container').childNodes;
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 5
Mithgol
@Mithgol
Начнём с того, что раз уж речь идёт о переключении классов, то уместно сразу все стили записать в CSS:
.bImg { /* сюда вписываем стиль обычного div */ }
.vImg { /* сюда вписываем стиль div, жмякнутого мышою */ }
Для элементов <div> после этого достаточно указывать классы (class="..." вместо style="...").

Затем при помощи библиотеки jQuery можно немало упростить себе задачу.

Во-первых, можно сделать проще HTML-код:
  1. Не придётся вписывать в него обработчики onclick, потому что они будут назначены позже, джаваскриптом.
  2. Не придётся и вписывать в него id, так как jQuery исполняет обработчики в контексте элементов: this указывает в обработчике на жмякнутый элемент.
Было так:
<div id="1" style="b-img" onclick="kodimg(id)">...</div>
<div id="2" style="b-img" onclick="kodimg(id)">...</div>
<div id="3" style="b-img" onclick="kodimg(id)">...</div>
<div id="4" style="b-img" onclick="kodimg(id)">...</div>
<div id="5" style="b-img" onclick="kodimg(id)">...</div>

Стало так:
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>

Во-вторых, желаемое достигается простым JS-кодом для jQuery:
$(function(){
   // после загрузки документа назначаем обработчики событий:
   $('div.bImg').click(function(){
      // в обработчике делаем две вещи:
      // 1) находим предыдущий жмякнутый div, отменяем жмякнутость
      $('div.vImg').removeClass('vImg').addClass('bImg');
      // 2) свежежмякнутому div придаём жмякнутость
      $(this).removeClass('bImg').addClass('vImg');
   });
});
Ответ написан
2 комментария
2 комментария
lafayette
@lafayette
Как-то так:
for (var i = 1; i <= 5; i++) {
  if (id == i) {
    document.getElementById(i).className = 'v-img';
  } else {
    document.getElementById(i).className = 'b-img';
  }
}
Ответ написан
2 комментария
2 комментария
kashey
@kashey
Программирую большую половину жизни 
onclick="kodimg(this)"

var lastkodimg=0;
function kodimg(_this)
{
 if(lastkodimg){
  lastkodimg.className='bimg'
 }
 _this.className='v-img';
 lastkodimg=_this;
}


проверено — работает
Ответ написан
Комментировать
Комментировать
@Serator
...
...
...
...
...

function kodimg(element){
document.querySelector('.current').classList.remove('current');// current — класс для выделенного элемента
element.classList.add('current');
}

Вы в задаче напутали, то про стили пишите. то про классы. Пример для firefox'а, по аналогии можно для остальных браузеров сделать.
Ответ написан
3 комментария
3 комментария
lexich
@lexich
Развивая тему jQuery
function($){
$(«div#id»).toggle(
function(){ $(this).attr(«class»,«vimg»);},
function(){ $(this).attr(«class»,«bimg»);});
})(jQuery);
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Приложение или модуль для Wordpress для учета поездок по QR
25 апр. 2024, в 03:58
10000 руб./за проект
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Ещё заказы