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并缩短代码。

toggle tr仅适用于Firefox

1 个答案: