顯示和隱藏div的javascript在IE中有效，但在FF或Chrome中不起作用

Question

我有一些跨度（准確地說是20），它們都具有ID。 然后，在樣式表中將可見性設置為“隱藏”。

單擊圖像地圖的一部分后，我制作了此腳本來顯示和隱藏這些跨度：

function showDiv(pass) {
    var divs = document.getElementsByTagName('span');    
    for (i = 0; i < divs.length; i++) {
        if (divs[i].id.match(pass)) {
            (pass).style.visibility = 'visible';
            divs[i].style.visibility = 'hidden';
        }          
    }
} 

它可以在IE中完美運行，但FF不會讓步，Chrome可以正常顯示它並存在一些小問題，我認為我可以解決。

有人知道FF為什么不接受嗎？ 任何建議將不勝感激，並在以后的生活中補償:)

Answer 1

style.display = 'none';
style.display = 'inline';

編輯

這是我的資料

http://www.w3schools.com/css/pr_class_display.asp

Answer 2

這是因為您要傳入一個字符串，然后再將其用作元素引用。 IE必須足夠聰明才能搜索DOM並找到ID匹配字符串的元素。

嘗試這個...

if (divs[i].id.match(pass)) {
    document.getElementById(pass).style.visibility = 'visible';
    divs[i].style.visibility = 'hidden';
}

或者，它可能是該String.match函數需要一個正則表達式。 如果以上方法仍不能解決您的問題，請嘗試此...

if (divs[i].id.match(new RegExp(pass, 'gi'))) {

Answer 3

pass是一個ID。 在Firefox中，DOM中的元素ID不能用作全局引用。 你不能做id .style.visibility = 'visible'; 相反，您的函數應如下所示：

function showDiv(pass) {
    var divs = document.getElementsByTagName('span');    
    for (i = 0; i < divs.length; i++) {
        if (divs[i].id.match(pass)) {
            divs[i].style.visibility = 'hidden';
        }          
    }
    document.getElementById(pass).style.visibility = 'visible';
}

您應該可以設置循環外pass的visibility ，因為您只需要執行一次。

Answer 4

    if (divs[i].id.match(pass)) {

pass真的是一個正則表達式嗎？ 在這里使用match似乎很不尋常。

        (pass).style.visibility = 'visible';

無論pass是字符串還是正則表達式都沒有道理。 都沒有style屬性。 將變量放在括號中無效。 對於我來說，它不適用於任何瀏覽器，包括IE。

我猜你的意思是：

function showDiv(pass) {
    var divs= document.getElementsByTagName('span');    
    for (var i= 0; i<divs.length; i++)
        divs[i].style.visibility= divs[i].id==pass? 'visible' : 'hidden';
}

另請注意var i ：這是停止i成為全局變量所必需的。 當兩個for i循環開始相互干擾時，這是一個非常常見的怪異錯誤源。