Страница 2 из 3 < 1 2 3 >
Показывать 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)

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, проблема не в моем коде


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