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
а ну да я про кнопку забыл =)

cyber 12.09.2012 14:50
вот так
<!DOCTYPE HTML>
<html>
  <head>
    <style>
    
      .happyend {
      
        background-color:red;
      
      }
    </style>
  </head>
  <body>
<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>
    
    <a href='#' id='bt'>go</a>
    <script>


 
     !function () {
        
      var elem =  document.getElementById('win');//у меня родитель с id "win"
      var child = elem.getElementsByClassName('inviz');
       var button = document.getElementById('bt');
       var leng = child.length;
       var i = 0;
        
       
        button.onclick = function (e) {
         
          
        if (i >= leng) return; 
          
       child[0].className = 'happyend';
         
        i++;
        return false;
          
        }
          
       }();
 
    </script>




  </body>
</html>

Torch`Ok 12.09.2012 15:03
Выкину по масмуму кода может кто че заметит...
Index.html ==>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/head.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script language="JavaScript">
function l_image(a)
         {
          document.images["tool"].src=a
         }

</script>
 <script>
 
     !function () {
        
      var elem =  document.getElementById('parent');
      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';
         i++;
          
        }
          
       }();
 
    </script> 
<script language="JavaScript">
$(document).ready(init);

function init(){
  $(".happyend").draggable({
     containment:'parent',
     cursor: 'move'
  });
  $("#ass2").click(function(){
    $(".happyend").draggable("disable");
  });
  $("#ass1").click(function(){
    $(".happyend").draggable("enable");
  });
}
   
</script>

<title></title>
</head>

<body>
<div id="getdiv"><input type="button" value="Добавить"/></div>
<div id="win">
  <IMG SRC="images/art/clp85.jpg" NAME="tool"/>
  
  <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 id="out_txt_21" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_22" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_23" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_24" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_25" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_26" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_27" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_28" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_29" class="inviz" contenteditable="true">Дополнительное поле</div>
  <div id="out_txt_30" class="inviz" contenteditable="true">Дополнительное поле</div>
  
    
  </div>
   
<div id="block_om">Для смены режима "перемещения" или "редактирования" используйте эти кнопки.  
  <input id="ass1" type="button" value="Перемещать" Onclick="init()">
  <input id="ass2" type="button" value="Редактировать" Onclick="init1()"> 
  </div>
</body>

cyber 12.09.2012 15:05
Цитата:
Сообщение от Torch`Ok (Сообщение 204328)
Выкину по масмуму кода может кто че заметит...
Index.html ==>
а по русски можно или хотя бы на английском:)

Torch`Ok 12.09.2012 15:10
Цитата:
Сообщение от cyber (Сообщение 204322)
вот так
<!DOCTYPE HTML>
<html>
  <head>
    <style>
    
      .happyend {
      
        background-color:red;
      
      }
    </style>
  </head>
  <body>
<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>
    
    <a href='#' id='bt'>go</a>
    <script>


 
     !function () {
        
      var elem =  document.getElementById('win');//у меня родитель с id "win"
      var child = elem.getElementsByClassName('inviz');
       var button = document.getElementById('bt');
       var leng = child.length;
       var i = 0;
        
       
        button.onclick = function (e) {
         
          
        if (i >= leng) return; 
          
       child[0].className = 'happyend';// тут вроде [i] нужно
         
        i++;
        return false;
          
        }
          
       }();
 
    </script>




  </body>
</html>
все равно не получается

Torch`Ok 12.09.2012 15:11
Цитата:
Сообщение от cyber (Сообщение 204329)
а по русски можно или хотя бы на английском:)
По максимуму:) сори

cyber 12.09.2012 15:16 
сhild[0].className = 'happyend';// тут вроде [i] нужно

нет.
Открой те консоль и гляньте есть там ошибки или нет

Torch`Ok 12.09.2012 15:25 
<script>
      !function () {
         
      var elem =  document.getElementById('win');
      var child = elem.getElementsByClassName('inviz');// TypeError: elem is null 
       var button = document.getElementById('getdiv');
       var leng = child.length;
       var i = 0;
         
        
        button.onclick = function (e) {
          
           
        if (i >= leng) return; 
           
       child[0].className = 'happyend';
          
        i++;
        return false;
           
        }
           
       }();
  
    </script>

cyber 12.09.2012 15:28
выведите в консоль(console.log(elem)) чему равно elem и скопируйте

Torch`Ok 12.09.2012 15:30
[14:29:05.918] ReferenceError: elem is not defined

cyber 12.09.2012 15:42
такая ошибка бывает только если не может найти элемент с таким id, проблема не в моем коде

Torch`Ok 12.09.2012 15:47
Ок... Спасибо... Внес ясность... Буду уже сам разбираться...

Torch`Ok 12.09.2012 16:40
Вот я лох:)... Ты же пишешь скрипт в конце.... А я лошара его в Head пру... Все работает Спасибо еще раз:)

cyber 12.09.2012 16:43
Цитата:
Сообщение от Torch`Ok (Сообщение 204374)
Вот я лох:)... Ты же пишешь скрипт в конце.... А я лошара его в Head пру... Все работает Спасибо еще раз:)
эм чет я тоже не обратил внимание на твой код ...


Часовой пояс GMT +3, время: 21:27.