Форум

Torch`Ok · #1 (**permalink**) 12.09.2012, 13:11

Здравствуйте... Я новичек, а значит пинать нежно плиз

...
Есть несколько 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 · #2 (**permalink**) 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 · #3 (**permalink**) 12.09.2012, 13:40

Чет не получается... Щас тему подредактирую может Вы меня не так поняли...

cyber · #4 (**permalink**) 12.09.2012, 13:46

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

Torch`Ok · #5 (**permalink**) 12.09.2012, 13:56

Да... чтоб от (div id="out_txt_10") до (div id="out_txt_20") класс менялся на .happyend

cyber · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 12.09.2012, 14:28

ссылку на сайт где не работает ...

Torch`Ok · #9 (**permalink**) 12.09.2012, 14:37

Он пока на компе...

cyber · #10 (**permalink**) 12.09.2012, 14:39

а ну да я про кнопку забыл =)

Форум

Справочник

Discord чат

Курсы javascript