为什么除了 IE7 到 IE9 之外，这个简单的 JQuery 悬停效果在任何地方都有效？答案

【问题标题】：Why does this simple JQuery Hover Effect work everywhere EXCEPT in IE7 thru IE9?为什么除了 IE7 到 IE9 之外，这个简单的 JQuery 悬停效果在任何地方都有效？
【发布时间】：2011-05-03 14:36:59
【问题描述】：

刚接触 jQuery（但不是 vanilla JS）我完全困惑为什么下面的悬停效果在 FF、Chrome、Safari 中有效，但在 IE 中无效！我从 Carl Meyer 的一篇帖子here 中得到了这个脚本；仅更改对象 ID 以匹配我的标记。

您可以找到此页面here 的工作示例，但代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<title>test</title>  
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript">
        $(document).ready(function() {
            toolButtons = $('#toolButtons > li');
            insideCenter = $('#insideCenter > div');
            toolButtons.each(function(idx) {
                    $(this).data('slide', insideCenter.eq(idx));
                }).hover(
                function() {
                    toolButtons.removeClass('active');
                    insideCenter.removeClass('active');             
                    $(this).addClass('active');  
                    $(this).data('slide').addClass('active');
                });
            });
    </script>
    <style type="text/css">  
        #toolButtons .active {   font-weight: bold; }  
        #insideCenter div {   display: none; }  
        #insideCenter div.active {   display: block; }  
    </style> 
 </head>

 <body>
    <ul id="toolButtons">   
        <li class="active">First slide</li>   
        <li>Second slide</li>   
        <li>Third slide</li>   
        <li>Fourth slide</li> 
    </ul> 
    <div id="insideCenter">   
        <div id="slide1" class="active">Well well.</div>   
        <div id="slide2">Oh no!</div>   
        <div id="slide3">You again?</div>   
        <div id="slide4">I'm gone!</div> 
    </div>
 </body>
</html>

非常感谢任何帮助！

维尼

【问题讨论】：

它适用于我的 IE8。您如何在 IE 上对其进行测试？

标签： jquery internet-explorer-7 jquery-hover

【解决方案1】：

致电var toolButtons = $('#toolButtons > li'); 和var insideCenter = $('#insideCenter > div');。

您删除了 var 并且无法看到它，因为它正在尝试设置全局变量。尽可能使用var，尤其是当变量不是全局变量时。

编辑：纯 jQuery：

$(document).ready(function() {             
   $('#toolButtons > li').each(function(idx) {                     
        $(this).data('slide', $('#insideCenter > div').eq(idx));                 
    }).hover(                 
        function() {                     
            $('#toolButtons > li').removeClass('active');
            $('#insideCenter > div').removeClass('active');                                  
            $(this).addClass('active');                       
            $(this).data('slide').addClass('active');                 
        });             
});

【讨论】：

如果我没有承认我确实有普通的 JS 经验，那也不会那么糟糕——但现在我没有理由错过了！
在声明中添加 var 确实修复了 IE6 中的错误 - jsfiddle.net/russcam/DYZT5/1
我要对您的编辑提出的唯一一点是，在每次迭代和每次事件处理函数执行时，您都会创建新的 jQuery 对象，而不是使用闭包来引用在父变量中捕获的 jQuery 对象范围。性能成本很可能可以忽略不计，但在我看来，它仍然会创建很多不必要的对象。
没错，只是将它添加为 javascript/jQuery 混合的快速替代方案。虽然不是真的需要。

【解决方案2】：

我认为您的 internet explorer 如何处理 javascript 存在问题，它似乎不喜欢您的变量，我相信更聪明的人将能够解释 internet explorer 和其他浏览器之间的区别这个上下文。

一种解决方案是全局定义它们：

    <script type="text/javascript" language="JavaScript">
  var toolButtons;
  var insideCenter;
    $(document).ready(function() {
        toolButtons = $('#toolButtons > li');
        insideCenter = $('#insideCenter > div');
        toolButtons.each(function(idx) {
                $(this).data('slide', insideCenter.eq(idx));
            }).hover(
            function() {
                toolButtons.removeClass('active');
                insideCenter.removeClass('active');             
                $(this).addClass('active');  
                $(this).data('slide').addClass('active');
            });
        });
</script>

【讨论】：

【解决方案3】：

嗯，显而易见的原因是 IE 是垃圾。但这实际上并不能帮助您... 可能有一种方法可以在 IE 中完成这项工作（尝试其他答案），但我认为更简单的方法是改变你改变css的方式。您正在使用一个函数来检测列表项是否被悬停，更简单的方法是创建一个函数，然后在鼠标悬停在 <li> 上时运行该函数

function onHover(){
change the css values for different IDs
}

然后为每个列表项做

<li onmouseover="onHover();">blah</li>

您可能需要多个功能（每个 li 一个），但这取决于您如何编写函数。

【讨论】：