My<cod/>.net
Изменение стиля при помощи javascript
Просмотров: 374
Ответов: 7
Кто может подсказать как решить задачку
есть 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
Как такое можно сделать?
<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>
function kodimg(id)
{
document.getElementById(id).className = 'v-img';
}
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';
}
И, независимо от выбранного варианта, почитать для начала книжки и поизучать материал в интернете.
Начнём с того, что раз уж речь идёт о переключении классов, то уместно сразу все стили записать в CSS:
.bImg { /* сюда вписываем стиль обычного div */ }
.vImg { /* сюда вписываем стиль div, жмякнутого мышою */ }
Для элементов <div> после этого достаточно указывать классы (class="..." вместо style="...").
Затем при помощи библиотеки jQuery можно немало упростить себе задачу.
Во-первых, можно сделать проще HTML-код:
- Не придётся вписывать в него обработчики onclick, потому что они будут назначены позже, джаваскриптом.
- Не придётся и вписывать в него 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');
});
});
.bImg { /* сюда вписываем стиль обычного div */ }
.vImg { /* сюда вписываем стиль div, жмякнутого мышою */ }
<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>
$(function(){
// после загрузки документа назначаем обработчики событий:
$('div.bImg').click(function(){
// в обработчике делаем две вещи:
// 1) находим предыдущий жмякнутый div, отменяем жмякнутость
$('div.vImg').removeClass('vImg').addClass('bImg');
// 2) свежежмякнутому div придаём жмякнутость
$(this).removeClass('bImg').addClass('vImg');
});
});