【问题标题】:jQuery hover w sticky click/selection problems in IEIE 中的 jQuery 悬停 w 粘滞点击/选择问题
【发布时间】:2011-03-11 11:40:12
【问题描述】:

我为我的 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="包含" 其中包含一个 DIV class="gallery" , 主要图像在里面,每个 IMG class="gall" /DIV -- 画廊 --

有一个 DIV class="thumbcontainer2",其中包含数字 1-8,每个 DIV class="thumb2"

有一个 DIV class="thumbcontainer",其中包含 IMG class="thumb" 中的 1-8 个缩略图

/DIV -- 包含 --


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

提前感谢您的帮助。 -丹

【问题讨论】:

    标签: jquery jquery-selectors indexing image-gallery portfolio


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 2011-04-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多