Mootools: Как создать новый элемент `span` внутри элемента` li` на mouseove? - PullRequest
Новая
       32

Mootools: Как создать новый элемент `span` внутри элемента` li` на mouseove?

0 голосов
/ 05 августа 2010

HTML-код: 

<ul id="el">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

Как создать новый элемент span внутри li элемента при наведении мыши? 

<ul id="el">
   <li></li>
   <li></li>
   <li><span></span></li><!--on mouseover > new element span-->
   <li></li>
</ul>

Ответы [ 2 ]

3 голосов
/ 05 августа 2010 
document.getElementById('el').addEventListener("mouseover", function(e){
  var e=e.target;
  if (e.nodeName=="LI") {
    var span=e.getElementsByTagName('span')[0];
    if(!span) {
      e.innerHTML="<span></span>";
    }
  }
},false);

Это сделает проверку для существующего SPAN перед его вставкой. Кроме того, он не требует JQuery или какой-либо другой инфраструктуры JS.

Протестировано на Firefox, но некоторые браузеры могут обрабатывать часть e.target по-другому, поэтому просто помните об этом.

1 голос
/ 06 августа 2010

попробуйте с этим: 

document.getElements('#el > li').addEvent('mouseenter', function(e) {
  var target = document.id(e.target);
  if (!target.getElement('span')) target.adopt(new Element('span'));
});

, если вы хотите удалить диапазон при наведении мыши, добавьте следующее: 

document.getElements('#el > li').addEvent('mouseleave', function(e) {
  document.id(e.target).getElements('span').destroy();
});

будьте осторожны, так как это очень наивные реализации и необходимый минимум для его работы.

...