JQuery наведите курсор мыши на проблемы с кликом / выбором в IE - PullRequest
Новая
       9

JQuery наведите курсор мыши на проблемы с кликом / выбором в IE

0 голосов
/ 03 июля 2010

Я сделал jquery-скрипт «hover with sticky click» для своего веб-портфолио, который работает в Chrome, Opera, Firefox и Safari - но у меня все еще есть некоторые проблемы с IE.

У меня 8миниатюры, которые исчезают от 0,3 до 1 непрозрачности при наведении.При нажатии он использует индекс миниатюры, чтобы показать соответствующее полноразмерное изображение.Он также связан с набором чисел, от 1 до 8, которые также уменьшают непрозрачность от 0,3 до 1. При наведении.

Наименее ясная часть - выбор, для которого применяется наведение.Это применяется к миниатюрам / числам по классам и использует индекс видимого изображения, чтобы отфильтровать «нажатый» большой палец / число, чтобы он оставался с полной непрозрачностью независимо от наведения.

С IE это «липкое»click 'не работает, и все элементы возвращаются к поведению при наведении.Куда я иду не так?(Мне не нужно, чтобы он возвращался к IE6 или чему-то еще, но я хочу по крайней мере заставить текущий IE работать должным образом.) 

<script type="text/javascript">
$(function() {    
    $(".gall").hide();
    $(".gall:first-child").show();
    var thumbs = $(".thumb2,.thumb")
    thumbs.fadeTo(0,0.3);
    $(".thumb2:first-child,.thumb:first-child").fadeTo(0,1);
    var notselected= $(".gall:visible").index();
    $(".thumb:not(#selected),.thumb2:not(#selected2)").hover(function (evt) {$(this).fadeTo(0,1);}, function (evt) {            
                  $(".thumb:gt("+notselected+"),.thumb2:gt("+notselected+"),.thumb:lt("+notselected+"),.thumb2:lt("+notselected+")").fadeTo(0,0.3);
    notselected.hover(function (evt) {notselected.fadeTo(0,1);},function (evt) {notselected.fadeTo(0,0.3);});
    });
    thumbs.click(function() {
        var thumbindex1 = $(".thumb").index(this)
        var thumbindex2 = $(".thumb2").index(this)
        if (thumbindex1>thumbindex2) {var indexboth = thumbindex1}
        else  {var indexboth = thumbindex2}
        var clicked = $(".thumb:eq("+indexboth+"),.thumb2:eq("+indexboth+")")
        var notclicked =  $(".thumb:gt("+indexboth+"),.thumb2:gt("+indexboth+"),.thumb:lt("+indexboth+"),.thumb2:lt("+indexboth+")")
            $("#tryme").html("A " +(indexboth+1)+ " was clicked <br> B "+(indexboth+1)+ " was clicked");  
            clicked.fadeTo(0,1);
            notclicked.fadeTo(0,0.3);
            $(".gall").hide();
            $(".gall:eq("+indexboth+")").show();             
         });
    });

Соответствующий HTML-код прост:

Существует контейнер: DIV class = "Содержит", который содержит DIV class = "галерея", основные изображения находятся внутри, каждый IMG class = "gall" / DIV - GALLERY -

тамявляется классом DIV = "thumbcontainer2", который содержит номера 1-8 каждое в отдельном классе DIV = "thumb2"

, есть класс DIV = "thumbcontainer", который содержит миниатюры 1-8 каждый вIMG class = "thumb"

/ DIV - CONTAIN -

Извините, если мой код jquery немного запутан, это мой первый jQuery / javascript.Я рад, что теперь он отлично работает во всех других упомянутых браузерах.Кто-нибудь может увидеть, где я ломаю его для Internet Explorer?

Заранее спасибо за любую помощь.-Дан

1 Ответ

0 голосов
/ 04 июля 2010

В общем и целом, то, как я использовал функцию .index (), сбивало с толку IE. я нашел на другом форуме предложение заменить .index () на .prevAll (селектор) .size (); достичь того же намеченного результата. это успешно.

Я все еще не понимаю, почему это было проблемой для IE, когда он нормально работал в других браузерах. вероятно, мой синтаксис немного сомнителен. jslint вернул проблемы с уже определенными переменными, где я использую условное выражение, чтобы решить, из какого списка выбрать переменную indexboth. может быть что-то связанное с этим?

...