Добавить прослушиватель событий в JavaScript для IE 7 - PullRequest
Новая
       8

Добавить прослушиватель событий в JavaScript для IE 7

1 голос
/ 21 июля 2011

Я хочу составить список меню, используя изображения. Каждое меню имеет два изображения (filename.jpg & filename_active.jpg). Каждый раз, когда я помещаю курсор мыши на его изображение, изображение меняется на другое. Это работает нормально в Firefox и Chrome, но у меня есть проблемы в IE 7 и ниже. Проблема в том, что javascript будет читать только последнюю часть (в этом случае он будет читать только третье меню). Код, который я покажу ниже, является только частью кода JavaScript для IE. Позвольте мне показать мой код:

HTML: 

<ul>
<li class="caresoul_menu active" id="menuli_first"><a href="first.php"><img src="img_first_active.jpg" /></a></li>
<li class="caresoul_menu" id="menuli_two"><a href="two.php"><img src="img_two.jpg" /></a></li>
<li class="caresoul_menu" id="menuli_three"><a href="three.php"><img src="img_three.jpg" /></a></li>

Javascript: 

var caresoul_menu = Dom.getElementsByClassName('caresoul_menu', 'li');
if(caresoul_menu.length > 0) {
   for(var im in caresoul_menu) {
      if (caresoul_menu[im].attachEvent) {
         caresoul_menu[im].attachEvent('onmouseover', function(){
            var liId = caresoul_menu[im].getAttribute('id').split('menuli_')[1];
            caresoul_menu[im].firstChild.firstChild.setAttribute('src','/image/'+liId+'_active.png');
         })
      }
   }
}

1 Ответ

0 голосов
/ 21 июля 2011

Я объясню: когда вызывается событие mouseover, цикл for уже завершился, поэтому переменная im имеет последнее известное значение, и значение одинаково для всех элементов <li>. Попробуйте что-то вроде: 

  if (caresoul_menu[im].attachEvent) {
     (function (that) {
        that.attachEvent('onmouseover', function(){
           var liId = that.getAttribute('id').split('menuli_')[1];
           that.firstChild.firstChild.setAttribute('src','/image/'+liId+'_active.png');
        });
     })(caresoul_menu[im]);
  }

Вам действительно нужно использовать attachEvent? Если вы присоедините прослушиватели событий способом DOM0 (element.onmouseover = function(){}), вы можете использовать ключевое слово this в прослушивателе событий.

...