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

它已準備就緒。我想我應該把它包含在代碼示例中 – CountMurphy

Javascript適用於Firefox和IE瀏覽器，但不適用於Chrome瀏覽器

回答

相關問題