我用这个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
有人发现问题吗?
元素上的 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
并使代码更短。