IE 中的 jQuery 悬停和粘性单击/选择问题

Question

我已经为我的网络作品集制作了一个“通过粘性点击悬停”jquery 脚本，它可以在 Chrome、Opera、Firefox 和 Safari 中运行 - 但我在使用 IE 时仍然遇到一些问题。

我有 8 个缩略图，悬停时不透明度会在 0.3 到 1 之间淡出。单击时，它使用缩略图的索引来显示相应的全尺寸图像。它还与一组数字 1-8 链接，悬停时不透明度也会从 0.3 淡出到 1。

最不清晰的部分是应用悬停的选择。这按类别应用于缩略图/数字，并使用可见图像的索引来过滤掉“单击的”缩略图/数字，以便无论悬停如何它都保持完全不透明。

对于 IE，这种“粘性点击”不起作用，所有元素都会恢复为悬停行为。我哪里出错了？ （我不需要它恢复到 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 class="gallery" ， 主要图像在里面，每个IMG class =“gall” /DIV -- GALLERY --

有一个 DIV class="thumbcontainer2"，每个包含数字 1-8 在一个单独的 DIV class="thumb2" 中

有一个 DIV class="thumbcontainer"，每个包含缩略图 1-8在 IMG class="thumb"

/DIV -- CONTAIN --

---

抱歉，如果我的 jquery 代码有点混乱，这是我的第一个 jQuery/javascript。我很高兴它现在在所有其他提到的浏览器中都能很好地工作。 谁能看到我在 Internet Explorer 中破坏了它的位置吗？

预先感谢您的任何帮助。 -担

Answer 1

总而言之，我使用 .index() 函数的方式让 IE 感到困惑。我在另一个论坛中发现建议将 .index() 替换为 .prevAll(selector).size();以达到相同的预期结果。这是成功的。

我仍然很困惑为什么这对 IE 来说是一个问题，而它在其他浏览器中工作得很好。可能我的语法有点问题。 jslint 返回了已定义变量的问题，其中我使用条件来决定从哪个列表中选择“indexboth”变量。也许与此相关？