Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 27.02.2015, 21:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

zm_sansan,
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .lightblue {
            background: lightblue;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".a:not(:has(>.a))").on('mouseenter mouseleave', function(event) {
                $(this).toggleClass('lightblue', event.type == 'mouseenter')
            });
        });
    </script>
</head>

<body>
    <div class='a'> 1
        <div class='a'> 2 </div>
        <div class='a'> 3
            <div class='a'> 4 </div>
        </div>
    </div>


</body>

</html>
Ответить с цитированием
  #12 (permalink)  
Старый 27.02.2015, 21:19
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

рони, спасибо, но то что я имел в виду сделал Safort, но только я не понимаю как его код переписать на JQuery. И не совсем понимаю как работает.
Ответить с цитированием
  #13 (permalink)  
Старый 27.02.2015, 21:40
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Сообщение от zm_sansan Посмотреть сообщение
рони, спасибо, но то что я имел в виду сделал Safort, но только я не понимаю как его код переписать на JQuery. И не совсем понимаю как работает.
Тут всё просто) События имеют особенность - они "всплывают" от дочернего элемента к родительскому.

function lightEl(e) {
//выводит в консоль объект события содержащий нужную инфу. Я его просто забыл убрать
  console.log(e); 
// в e.target содержится ссылка на наведённый элемент.
// метод toggle() добавляет элементу нужный класс, а если этот класс уже есть, то удаляет его.
  e.target.classList.toggle('lightme');
}

//вешаем на элемент-родитель обработчики событий.
document.querySelector('#el').addEventListener('mouseover', lightEl , false);
document.querySelector('#el').addEventListener('mouseout', lightEl , false);


Код можно и сократить:


function lightEl(e) {
  e.target.classList.toggle('lightme');
}

var el = document.querySelector('#el');
el.addEventListener('mouseover', lightEl , false);
el.addEventListener('mouseout', lightEl , false);
Ответить с цитированием
  #14 (permalink)  
Старый 27.02.2015, 21:54
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

Safort,
а почему родительские элементы перестали подсвечиваться?
Я порядок действий не понимаю как всё происходит.
Т.е. откуда начинается всплытие, если, например, на элемент 3 навожу курсор, как меняется при этом подсветка.. дочерних же элементов много и они на разных уровнях иерархии
Ответить с цитированием
  #15 (permalink)  
Старый 27.02.2015, 22:04
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

zm_sansan,
http://learn.javascript.ru/bubbling-and-capturing
Ответить с цитированием
  #16 (permalink)  
Старый 27.02.2015, 22:14
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

спасибо, это и читаю)
Ответить с цитированием
  #17 (permalink)  
Старый 27.02.2015, 22:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

zm_sansan,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .lightblue {
    background: lightblue;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
  $(".a").on('mouseover mouseout',function(event) {
     event.stopPropagation();
     $(this).toggleClass('lightblue', event.type == 'mouseover')
});
});

  </script>
</head>

<body>
<div class='a'> 1
  <div class='a'> 2 </div>
   <div class='a'> 3
     <div class='a'> 4  </div>
  </div>
</div>

  <div class='a' id="el"> 1
  <div class='a'> 2 </div>
   <div class='a'> 3 </div>
</div>
</body>

</html>
Ответить с цитированием
  #18 (permalink)  
Старый 27.02.2015, 22:24
Интересующийся
Отправить личное сообщение для zm_sansan Посмотреть профиль Найти все сообщения от zm_sansan
 
Регистрация: 26.05.2012
Сообщений: 26

рони,
Спасибо, всё понятно, останавливаем всплытие значит и назначаем или убираем класс
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Что означает [^] riva Общие вопросы Javascript 26 07.08.2014 20:42
Поиск элемента под абсолютно позиционированным hijeane Общие вопросы Javascript 3 30.12.2013 18:19
селект переделанный под список Vasёk18 Элементы интерфейса 0 13.04.2012 23:49
Загрузка элемента при фокусе и не только login18 Events/DOM/Window 5 10.12.2010 18:40
Скрипт меню работает только под IE7 и выше TAILER Internet Explorer 1 31.08.2009 13:21