切換TR只適用於Firefox

Question

我使用這個js：

var RowT = 1; 

function toggleRowT() { 
    if (RowT == 0) { 
     window.document.getElementById('t1').style="display:table-row;"; 
     window.document.getElementById('t2').style="display:table-row;"; 
     window.document.getElementById('t3').style="display:table-row;"; 
     window.document.getElementById('letter_t').style="opacity:1;"; 
     RowT = 1; 
    } else if (RowT == 1) { 
     window.document.getElementById('t2').style="display:none;"; 
     window.document.getElementById('t3').style="display:none;"; 
     window.document.getElementById('t1').style="display:none;"; 
     window.document.getElementById('letter_t').style="opacity:0.2;"; 
     RowT = 0; 
    } 
} 

var RowD = 1; 

function toggleRowD() { 
    if (RowD == 0) { 
     window.document.getElementById('d1').style="display:table-row;"; 
     window.document.getElementById('d2').style="display:table-row;"; 
     window.document.getElementById('d3').style="display:table-row;"; 
     window.document.getElementById('d4').style="display:table-row;"; 
     window.document.getElementById('letter_d').style="opacity:1;"; 
     RowD = 1; 
    } else if (RowD == 1) { 
     window.document.getElementById('d1').style="display:none;"; 
     window.document.getElementById('d2').style="display:none;"; 
     window.document.getElementById('d3').style="display:none;"; 
     window.document.getElementById('d4').style="display:none;"; 
     window.document.getElementById('letter_d').style="opacity:0.2;"; 
     RowD = 0; 
    } 
} 

在這個文件

：http://flamencopeko.net/bpm_calc.js

此頁：http://flamencopeko.net/bpm_calc.php

在http://www.jslint.com粘貼以上代碼生成了太多的錯誤他們列出。但它像失蹤的白色空間中的所有奇怪玩意，用===代替==等

這是兩個按鈕，將不會在其他瀏覽器的HTML：

<a href="javascript:toggleRowT();"><img src="/ico/letter_t.gif" class="ico" alt="X" title="toggle triplets" id="letter_t">triplets</a> 

<a href="javascript:toggleRowD();"><img src="/ico/letter_d.gif" class="ico" alt="X" title="toggle dotted" id="letter_d">dotted</a> 

這是css：http://flamencopeko.net/flame_style.css

任何人發現問題？

Answer 1

元素上的style屬性不是字符串，它是一個對象。如果你想要設置樣式對象的display財產，你是這樣做的：

window.document.getElementById('d1').style.display = "none"; 
// Note display is a property of style ---^    ^
// And there's no ; at the end of the value -------------/ 

（類似設置opacity時。）

如果它工作在Firefox，Firefox中必須有特殊的處理時，您將一個字符串分配給該屬性。

---

而我只是無法抗拒最小改寫：

function toggleRow(type) { 
    var elm, n; 
    var display, opacity; 

    // Loop through the rows 
    for (n = 1; n <= 3; ++n) { 
     // Get this row 
     elm = document.getElementById(type + n); // t1/d1, t2/d2, t3/d3 

     // If it's the first, figure out the values to use 
     if (n === 1) { 
      if (elm.style.display === "none") { 
       display = "table-row"; 
       opacity = "1"; 
      } 
      else { 
       display = "none"; 
       opacity = "0.2"; 
      } 
     } 

     // Set the display 
     elm.style.display = display; 
    } 

    // And the opacity 
    document.getElementById("letter_" + type).style.opacity = opacity; 
} 

HTML：

<a href="javascript:toggleRow('t');"><img src="/ico/letter_t.gif" class="ico" alt="X" title="toggle triplets" id="letter_t">triplets</a> 

<a href="javascript:toggleRow('d');"><img src="/ico/letter_d.gif" class="ico" alt="X" title="toggle dotted" id="letter_d">dotted</a> 

隨着越來越多的背景下，我敢打賭，我們可以得到完全擺脫id S和縮短代碼。