Изменение класса Div-ов по клику...
Здравствуйте... Я новичек, а значит пинать нежно плиз:) ...
Есть несколько div: <div id="win"> <div id="out_txt_1" class="happyend" contenteditable="true">текст</div> <div id="out_txt_2" class="happyend" contenteditable="true">текст</div> <div id="out_txt_3" class="happyend" contenteditable="true">текст</div> <div id="out_txt_4" class="happyend" contenteditable="true">текст</div> <div id="out_txt_5" class="happyend" contenteditable="true">текст</div> <div id="out_txt_6" class="happyend" contenteditable="true">текст</div> <div id="out_txt_7" class="happyend" contenteditable="true">текст</div> <div id="out_txt_8" class="happyend" contenteditable="true">текст</div> <div id="out_txt_9" class="happyend" contenteditable="true">текст</div> <div id="out_txt_10" class="inviz" contenteditable="true">текст</div> <div id="out_txt_11" class="inviz" contenteditable="true">текст</div> <div id="out_txt_12" class="inviz" contenteditable="true">текст</div> <div id="out_txt_13" class="inviz" contenteditable="true">текст</div> <div id="out_txt_14" class="inviz" contenteditable="true">текст</div> <div id="out_txt_15" class="inviz" contenteditable="true">текст</div> <div id="out_txt_16" class="inviz" contenteditable="true">текст</div> <div id="out_txt_17" class="inviz" contenteditable="true">текст</div> <div id="out_txt_18" class="inviz" contenteditable="true">текст</div> <div id="out_txt_19" class="inviz" contenteditable="true">текст</div> <div id="out_txt_20" class="inviz" contenteditable="true">текст</div> </div> Кнопка: <div id="getdiv"><input type="button" value="Добавить" onclick="getEl()"/></div> И Скрипт:
<script language="JavaScript">
function getEl(){
for(i=10;i<=20;i++)
document.getElementById('out_txt_'+i).className='happyend';
}
</script>
Css:
.inviz {display:none;}
.happyend {display:block;}
Скрипт меняет класс сразу у всех div начиная с 10-го... А как сделать что б по клику на кнопку менялся сначало у 10-го.. По второму клику у 11-го и т.д.???Второй день ищу ниче не могу найти... Нужно чтоб класс .inviz менялся на класс .happyend и соответственно Div-ы становились видимыми |
<!DOCTYPE HTML>
<html>
<head> <style>
.red {
background-color:red;
}
</style></head>
<body>
<div id='parent'>
<div id="out_txt_1" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_2" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_3" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_4" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_5" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_6" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_7" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_8" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_9" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_10" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_11" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_12" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_13" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_14" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_15" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_16" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_17" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_18" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_19" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_20" class="inviz" contenteditable="true">текст</div>
</div>
<script>
!function () {
var elem = document.getElementById('parent');
var child = elem.children;
var i = child.length;
elem.onclick = function (e) {
i--;
if (i < 0) return;
child[i].className = 'red';
}
}();
</script>
</body>
</html>
|
Чет не получается... Щас тему подредактирую может Вы меня не так поняли...
|
менялись у элементов с классом "inviz" начиная с первого и до последнего?
|
Да... чтоб от (div id="out_txt_10") до (div id="out_txt_20") класс менялся на .happyend
|
<!DOCTYPE HTML>
<html>
<head> <style>
.red {
background-color:red;
}
</style></head>
<body>
<div id='parent'>
<div id="out_txt_1" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_2" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_3" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_4" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_5" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_6" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_7" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_8" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_9" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_10" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_11" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_12" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_13" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_14" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_15" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_16" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_17" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_18" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_19" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_20" class="inviz" contenteditable="true">текст</div>
</div>
<script>
!function () {
var elem = document.getElementById('parent');
var child = elem.getElementsByClassName('inviz');
var leng = child.length;
var i = 0;
elem.onclick = function (e) {
if (i >= leng) return;
child[i].className = 'inviz red';
i++;
}
}();
</script>
</body>
</html>
|
Когда отдельно запускаю эт работает... А вставляю в свой сайт и не хочет работать...
<script>
!function () {
var elem = document.getElementById('win');//у меня родитель с id "win"
var child = elem.getElementsByClassName('inviz');
var leng = child.length;
var i = 0;
// по нажатию на кнопку
document.getElementById('getdiv').onclick = function (e) {
if (i >= leng) return;
child[i].className = 'inviz happyend';// вот тут не понятно почему 2 класса пишутся???
i++;
}
}();
</script>
Правильно ли я подредактировал???? И может ли мешать то, что на этих дивах Drag&Drop jqyery действует??? |
ссылку на сайт где не работает ...
|
Он пока на компе...
|
а ну да я про кнопку забыл =)
|
| Часовой пояс GMT +3, время: 10:43. |