Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменение класса Div-ов по клику... (https://javascript.ru/forum/events/31550-izmenenie-klassa-div-ov-po-kliku.html)

Torch`Ok 12.09.2012 13:11
Изменение класса 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-ы становились видимыми

cyber 12.09.2012 13:25 
<!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>

Torch`Ok 12.09.2012 13:40
Чет не получается... Щас тему подредактирую может Вы меня не так поняли...

cyber 12.09.2012 13:46
менялись у элементов с классом "inviz" начиная с первого и до последнего?

Torch`Ok 12.09.2012 13:56
Да... чтоб от (div id="out_txt_10") до (div id="out_txt_20") класс менялся на .happyend

cyber 12.09.2012 14:01 
<!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>

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

cyber 12.09.2012 14:28
ссылку на сайт где не работает ...

Torch`Ok 12.09.2012 14:37
Он пока на компе...

cyber 12.09.2012 14:39
а ну да я про кнопку забыл =)


Часовой пояс GMT +3, время: 12:49.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице