【发布时间】: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