Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.09.2012, 13:11
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 40

Изменение класса 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-ы становились видимыми

Последний раз редактировалось Torch`Ok, 12.09.2012 в 13:46.
Ответить с цитированием
  #2 (permalink)  
Старый 12.09.2012, 13:25
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,413

<!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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 12.09.2012, 13:40
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 40

Чет не получается... Щас тему подредактирую может Вы меня не так поняли...
Ответить с цитированием
  #4 (permalink)  
Старый 12.09.2012, 13:46
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,413

менялись у элементов с классом "inviz" начиная с первого и до последнего?
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 12.09.2012, 13:56
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 40

Да... чтоб от (div id="out_txt_10") до (div id="out_txt_20") класс менялся на .happyend
Ответить с цитированием
  #6 (permalink)  
Старый 12.09.2012, 14:01
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,413

<!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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 12.09.2012, 14:23
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 40

Когда отдельно запускаю эт работает... А вставляю в свой сайт и не хочет работать...
<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 действует???

Последний раз редактировалось Torch`Ok, 12.09.2012 в 14:31.
Ответить с цитированием
  #8 (permalink)  
Старый 12.09.2012, 14:28
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,413

ссылку на сайт где не работает ...
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #9 (permalink)  
Старый 12.09.2012, 14:37
Аспирант
Отправить личное сообщение для Torch`Ok Посмотреть профиль Найти все сообщения от Torch`Ok
 
Регистрация: 12.09.2012
Сообщений: 40

Он пока на компе...
Ответить с цитированием
  #10 (permalink)  
Старый 12.09.2012, 14:39
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,413

а ну да я про кнопку забыл =)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как переписать div по клику по нему Lewik Общие вопросы Javascript 3 08.05.2012 22:27
Изменение содержимого DIV BorisBritva jQuery 2 11.03.2012 11:02
Изменение содержимого div по клику и передача данных POST Serious2008 Общие вопросы Javascript 3 13.11.2011 19:12
плавное изменение размеров div dimon76 Элементы интерфейса 9 07.11.2011 12:28
Изменение CCS-свойства DIV по прошествии времени Pug-dog&Elephant Events/DOM/Window 1 31.05.2011 08:10