Javascript适用于Firefox和IE浏览器，但不适用于Chrome浏览器

我有一个网页，我认为一次显示的内容太多，所以我编写了一些JavaScript来隐藏一大堆图像，直到需要时为止。在所述页面的底部，我有一个链接，上面写着：“点击此处进行屏幕截图！”点击时，JS将显示一个以前隐藏的跨度，其中包含所有屏幕截图。链接文本更改为“点击此处隐藏屏幕截图”。这适用于IE和Firefox，但由于某些原因，不在Chrome中（在Chrome中，我必须点击隐藏链接3次，才能再次隐藏范围）。代码非常简单，但我无法弄清楚它有什么问题。有任何想法吗？Javascript适用于Firefox和IE浏览器，但不适用于Chrome浏览器

的JS：

$('#show').click(function(){ 
$('#Screenies').show('slow'); 
$('#show').hide(); 
$('#hide').show(); 
}); 

$('#hide').click(function(){ 
$('#Screenies').hide('slow'); 
$('#hide').hide(); 
$('#show').show(); 
});

的HTML：

<p id="show" style="cursor:pointer; color:Navy"><u>Click here for sceenshots!</u></p> 
<p id="hide" style="cursor:pointer; color:Navy"><u>Hide sceenshots</u></p> 
<span id="Screenies"> 
     [Image links in here] 
</span>

编辑：忘了提我使用jQuery 1.6

来源

2011-07-11 CountMurphy

我怀疑隐藏动画与它有关。你可以尝试没有它？ – Mrchief

如果您在每种方法中添加了一个alert（），它会在前两次点击时出现在Chrome中？ –

下载firebug for chrome并运行console.log（）函数以确保单击它时该函数正在运行，或者警报正常工作....：P – Trevor

这是与事实，你是动画做一个跨度元素 - 不问我为什么。但是，如果你使用语义标记，你应该使用div来保存图像。我重新考虑了你的代码，所以现在你只需要1个链接。

$('#show').toggle(function(){ 
    $('#Screenies').show('slow'); 
    $('#show').text('Hide'); 
}, function(){ 
    $('#Screenies').hide('slow'); 
    $('#show').text('Show'); 
});

如果你不知道的jQuery的切换功能read this article，该代码的其余部分只是在动画的元素，然后改变基于当前状态的链接文字。

来源

2011-07-11 16:22:31

为什么在这种情况下，你认为'span'是非语义的？请记住，'img'元素是一个替换的自然行内元素，因此可以在“span”（内联元素）内有效地包含它。如果有大量的图像，那么***也许***列表将是更多的语义... –

因为它是一个内联元素，我会说图像链接是分开的，因为有一些它们，并且该跨度不包含在其他任何块元素中。 –

好吧，将跨度改为div工作。此外，感谢重构代码^ _ ^现在更清洁。 – CountMurphy

Chrome在代码运行时可能找不到元素。将这些代码包装在document.ready事件中是个好主意，如下所示：

$(document).ready(function() { 
$('#show').click(function(){ 
$('#Screenies').show('slow'); 
$('#show').hide(); 
$('#hide').show(); 
}); 

$('#hide').click(function(){ 
$('#Screenies').hide('slow'); 
$('#hide').hide(); 
$('#show').show(); 
}); 
});

这对我来说确实有效。

来源

2011-07-11 16:27:35 Daan

Javascript适用于Firefox和IE浏览器，但不适用于Chrome浏览器

回答

相关问题