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

Question

[Александр]

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

есть 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

Как такое можно сделать?

Comments

[Александр]

хочу уточнить что id не идут подряд как на примере, а могут быть 5, 15, 75, 153, 183

Answer 1

[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';
  }

И, независимо от выбранного варианта, почитать для начала книжки и поизучать материал в интернете.

Comments

[Александр]

воспользовался вариантом 1.
По поводу изучения, спасибо, изучаю, но не всегда всё понятно.

Answer 2

[DevMan]

Выберите все нужные дивы, а дальше как написано выше.

document.getElementById('container').childNodes;

Answer 3

[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');
   });
});

Comments

[Александр]

да в задании напутал, style читать как class. В задании исправил.
За предложенный вариант спасибо!

[Антон]

А еще лучше сделать сначала так:
var vImg = $('div.vImg'); / Будет значительно быстрее в ИЕ6 работать да и в целом так правильней.
И уже затем

$(function(){
vImg.click(function(){
vImg.removeClass('vImg').addClass('bImg');
$(this).removeClass('bImg').addClass('vImg');//Как вариант можно вместо removeClass.addClass использовать тока 1 метод .attr('class','vImg'). Не факт, конечно, что так быстрее, но кода меньше.
});
});

Answer 4

[lafayette]

Как-то так:

for (var i = 1; i <= 5; i++) {
  if (id == i) {
    document.getElementById(i).className = 'v-img';
  } else {
    document.getElementById(i).className = 'b-img';
  }
}

Comments

[Александр]

спасибо, но это если id идут подряд, а как быть если не подряд?

[lafayette]

вариант 1: запоминать элемент, по которому кликнули в последний раз и в onclick сбросить ему стиль на дефолтовый, новому поменять на нужный и запомнить его для следующих изменений.
вариант 2: парсить список яваскриптом при загрузке страницы, создавая массив id, по которым нужно будет пробегать.

Answer 5

[Антон Корзунов]

onclick="kodimg(this)"

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

проверено — работает

Answer 6

[Serator]

...
...
...
...
...

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

Вы в задаче напутали, то про стили пишите. то про классы. Пример для firefox'а, по аналогии можно для остальных браузеров сделать.

Comments

[Serator]

парсер скушал кусок :( (в функцию проще сам элемент как this передавать)

[Александр]

А разве стили нельзя оформить как class?

[Serator]

Можно, но нужно так и писать в вопросе, ибо по классу проще найти нужный элемент, чем по его стилю.

Вам по сути-то нужно по событию «click» найти выделенный элемент, удалить класс «выделенности» и далее добавить этот класс тому элементу, на ктором сработало событие «click». В подобной задаче я вообще делегированием обошелся бы, что-то вроде:

[div id=«container»]
[div class=«element»][/div]
[div class=«element»][/div]
[div][/div]
[div class=«element»][/div]
[/div]

(дабы парсер не съели теги :) )

(пример для Firefox'а)

document.querySelector('#container').addEventListener('click',function(event){
if(event.target.contains('element')===true){// Проверка на то, что событие «click» произошло по нужному элементу (эта проверка не имеет смысла, если в контейнере только ну; ные элементы)
this.querySelector('.current').classList.remove('current');// Ищем в контейнере выделенный элемент и удаляем у него класс «current»
event.target.classList.add('current');// Добавляем класс «current» к элементу, у которого произошло событие
}
},false);

(оформить красво не могу, ибо карма в минусе :( )

Answer 7

[lexich]

Развивая тему jQuery
function($){
$(«div#id»).toggle(
function(){ $(this).attr(«class»,«vimg»);},
function(){ $(this).attr(«class»,«bimg»);});
})(jQuery);

Comments

[lexich]

Блин задумался и написал не про то))