javascript - toggle 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 -------------/

(设置不透明度时类似。)

如果它在 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 并使代码更短。