Question

我想通过使用图像制作菜单列表。每个菜单都有两个图像（filename.jpg＆amp; filename_active.jpg）。每当我将鼠标放在图像上时，图像将变为另一个图像。它在Firefox和Chrome中运行正常，但我在IE 7及更低版本中遇到问题。问题是，javascript只会读取最后一部分（在这种情况下，他只会阅读第三个菜单）。我将在下面显示的代码只是IE中javascript代码的一部分。让我展示一下我的代码：

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');
         })
      }
   }
}

Answer 1

我将解释：当触发mouseover事件时，for循环已经结束，因此im变量具有最后的已知值，并且所有{{1}的值都相同元素。尝试类似：

<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]); }吗？如果您使用DOM0方式（attachEvent）附加事件侦听器，则可以在事件侦听器中使用element.onmouseover = function(){}关键字。

在IE 7的javascript中添加事件监听器

1 个答案: