0

我为我的 web 产品组合制作了一个“带有粘性点击的悬停”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 class="contain" 里面有一个 DIV class="gallery" ，主要的图片都在里面，每个 IMG class="gall" /DIV -- GALLERY --

有一个 DIV 类 =“thumbcontainer2”，其中包含数字 1-8，每个在一个单独的 DIV 类 =“thumb2”

有一个 DIV 类 =“thumbcontainer”，其中包含 IMG 类 =“thumb”中的每个缩略图 1-8

/DIV -- 包含 --

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

提前感谢您的帮助。-担

4

1 回答 1

0

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

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

于 2010-07-04T06:04:37.910 回答