2010-07-03 65 views
0

我做了一個懸停與粘性點擊'jquery腳本爲我的網絡投資組合,在Chrome,Opera,Firefox和Safari的作品 - 但我仍然有一些問題與IE瀏覽器。jQuery懸停w粘性點擊/選擇問題在IE瀏覽器

我有8個縮略圖可以在懸停時在0.3和1之間褪色。點擊後,它使用縮略圖的索引顯示相應的全尺寸圖像。它還與一組數字相關聯,1-8也可以在懸停時從0.3到1不透明度消失。

最不清楚的部分是應用懸停的選擇。這是按類應用於縮略圖/數字的,並使用可見圖像的索引來過濾掉「點擊」的拇指/數字,以使其保持完全不透明狀態,而不管懸停。

使用IE這個'sticky 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類=「包含」 持有一個DIV類=「庫」, 主圖像內,每個IMG類=「癭」 /DIV - 庫 -

有一個DIV class =「thumbcon tainer2" ,其中包含在一個單獨的DIV類=數1-8的每個‘的Thumb2’

有一個DIV類=‘thumbcontainer’,其中包含縮略圖每1-8在一個IMG類=‘拇指’

/DIV - 包含 -


很抱歉,如果我的jQuery代碼是有點困惑,這是我第一次的jQuery/JavaScript的。我很興奮,現在它在所有其他提到的瀏覽器中效果很好。 任何人都可以看到我打破Internet Explorer的位置嗎?

在此先感謝您的幫助。 -DAN

回答

0

長和短的是,我使用.index()函數的方式是令人困惑的IE瀏覽器。我在另一個論壇中發現了一個建議,用.prevAll(selector).size()替換.index();達到相同的預期結果。這是成功的。

我仍然困惑,爲什麼這是一個IE的問題,當它在其他瀏覽器工作正常。可能我的語法有點問題。 jslint返回了已定義變量的問題,我使用條件來決定從哪個列表中選擇'indexboth'變量。也許與此有關?