可见性属性在javascript函数中无法正常工作

Question

我有一张桌子：

<table>
<tr>
  <td colspan="2"><h2>Order Awards here:</h2></td>
</tr>

<tr>
  <td class="aocBlack">Delivery:</td>
  <td>
    <select style="width: 200px;" id="deliveryMethod" name="deliveryMethod" size="1" onchange="showMailing()">
       <option value="print">I will print it myself.</option>
       <option value="mail">Please mail it to me.</option></select>
  </td>
</tr>

<tr id="messageText" style="">
  <td class="aocBlack" colspan="2">Message to appear on card:</td>
</tr>
<tr id="messageText2" style="">
  <td colspan="2"><textarea id="certMessage" name="certMessage" rows="5" cols="10" style="width: 284px;"></textarea></td>
</tr>
</table>

当名为deliveryMethod的选择框设置为“print”时，应该可以看到以下两个表行（id messageText和messageText2）。当它被设置为“邮件”时，它们应该被隐藏。我之前有一些javascript工作没有问题，但我以前瞄准的id总是div。我不知道表行的行为是否有所不同，但我得到了一些奇怪的结果。这是JS：

function showMailing(){
    e = document.getElementById("deliveryMethod");
    eVal = e.options[e.selectedIndex].value;

    if (eVal == "mail"){
        document.getElementById("messageText").style.display="none";
        document.getElementById("messageText2").style.display="none";
    }else{
        document.getElementById("messageText").style.display="inline";
        document.getElementById("messageText2").style.display="inline";
    }
}

结果有点奇怪，对我的（诚然是javascript / css-rusty）眼睛。例如，当页面最初加载时，所有内容都按预期显示：下拉列表的默认值为“print”，因此显示的两个表行。当您将下拉菜单更改为“邮件”时，它们都会消失。但是当你把它改回来时，这些字段都被推到了它们应该的位置。这些结果在FF和Chrome中是一致的（奇怪的是它在IE中正常工作）所以我不得不假设我做错了什么，但我不知道是什么。

以下是一些屏幕截图（请注意，屏幕截图中显示的一些字段是为了清晰起见而删除了此处显示的代码。）有人可以帮助我吗？

初始加载时：

从打印更改为邮件后：

从邮件更改回打印后：

Answer 1

表格行的默认display值为table-row（*）。如果你把它设置为inline，你会要求浏览器在内联文本而不是一行中绘制表格单元格，这会使它混淆并给出未指定的结果。

（*：除了IE＆lt; 8，它不支持与表相关的显示值，而是将它们全部设置为block并赋予元素本身魔术布局的权力。）

显示/隐藏的更好方法是，您不必担心默认显示值可能是什么，是定义一个类：

.hidden { display: none; }

然后在元素上打开和关闭该类。

document.getElementById('deliveryMethod').onchange= function() {
    var cls= this.value==='mail'? 'hidden' : '';
    document.getElementById('messageText').className= cls;
    document.getElementById('messageText2').className= cls;
};

从脚本中分配处理程序允许您删除onchange内联属性。您也不需要size="1"（不用说单选）或style=""。

使用this.options[this.selectedIndex].value阅读select值的业务您可能不再需要了，除非您正在处理古老的浏览器。

Answer 2

function showMailing(){ 
    e = document.getElementById("deliveryMethod"); 
    eVal = e.options[e.selectedIndex].value; 

    if (eVal == "mail"){ 
        document.getElementById("messageText").style.display="none"; 
        document.getElementById("messageText2").style.display="none"; 
    }else{ 
        document.getElementById("messageText").style.display="table-row"; 
        document.getElementById("messageText2").style.display="table-row"; 
    } 
} 

Answer 3

我建议避免使用“eVal”作为变量名，因为有一个名为eval（）的原生JS方法。您使用的大小写是不同的（“eVal”而不是“eval”），因此它可能不会破坏事物。但它很容易让人类读者感到困惑。此外，如果您不小心忘记将“V”大写，然后需要使用eval（）方法，则可能会破坏您的脚本。

因此，通常，请避免使用与现有方法名称类似的变量名称。我可以建议“selectOption”或“sel”或其他东西吗？