Почему этот простой JQuery Hover Effect работает везде, кроме как в IE7 через IE9? - PullRequest
Новая
       5

Почему этот простой JQuery Hover Effect работает везде, кроме как в IE7 через IE9?

1 голос
/ 03 мая 2011

Будучи новичком в jQuery (но не ванильным JS), я совершенно сбит с толку, почему следующий эффект наведения работает в FF, Chrome, Safari, но не в IE!Я получил этот скрипт из одного из постов Карла Мейера здесь ;изменение только идентификаторов объектов для соответствия моей разметке.

Вы можете найти рабочий пример этой страницы здесь , но вот код: 

<!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>

Любая помощьс благодарностью!

Винни

Ответы [ 3 ]

2 голосов
/ 03 мая 2011

Вызовите var toolButtons = $('#toolButtons > li'); и var insideCenter = $('#insideCenter > div');.

Вы сбросили var, и его нельзя увидеть, когда он пытается установить глобальную переменную.По возможности используйте var, особенно если переменная не является глобальной.

РЕДАКТИРОВАТЬ: Pure 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');                 
        });             
});
0 голосов
/ 03 мая 2011

ну, очевидная причина в том, что IE это дерьмо.Но так как это на самом деле вам не помогает ... В IE может быть способ сделать это (попробуйте другие ответы), но я думаю, что более простым способом было бы изменить то, как вы меняете CSS.Вы используете функцию, чтобы обнаружить, что элементы списка находятся над, более простой способ - создать функцию, которая затем запускается, когда мышь наводит курсор на <li>

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

, затемкаждый элемент списка делает 

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

, вам может потребоваться несколько функций (по одной для каждого li), но это зависит от того, как вы пишете свои функции.

0 голосов
/ 03 мая 2011

Я думаю, что есть проблема с тем, как 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>
...