Javascript按id隐藏和显示元素不适用于多种情况

Question

我真的不知道任何 javascript，但我已经能够拼凑出一种方法来以编程方式隐藏网页上的 html 表格，使用以下行的版本在页面打开时隐藏它们：

document.getElementById("approved").style.display = "none";

等

然后根据从选择菜单中选择的值显示元素，使用以下方法：

document.getElementById('cboaim').addEventListener('change', function (){
var style = this.value == "10" ? 'block' : 'none';
document.getElementById('approved').style.display = style;
var style = this.value == "13" ? 'block' : 'none';
document.getElementById('enddate').style.display = style;
var style = this.value == "14" ? 'block' : 'none';
document.getElementById('tortm').style.display = style;
var style = this.value == "17" ? 'block' : 'none';
document.getElementById('enddate').style.display = style;
});

除了与“结束日期”相关的两行之外，这几乎适用于所有内容。它适用于其中一个值，但不适用于另一个。我假设引用元素 id 两次会破坏此代码（选择 13 和 17 都需要出现此日期框）。

由于更复杂的原因，我不能只添加另一个具有不同 id 的表，所以我希望有人知道解决问题的简单方法。请对我温柔一点，我知道 javascript 可能会冒犯程序员 ;-)

如果这样更容易的话，我也很乐意使用附加到 onchange 的函数？我只使用 addeventlistener 是因为在 stackoverflow 上的搜索找到了那个特定的解决方案。

干杯 莱斯

Answer 1

删除所有这些 var 语句。在同一个作用域内多次声明同一个var是无效的JS。

现在，检查值 "17" 将始终覆盖 "13"，更改 'enddate' 元素的条件：

document.getElementById('cboaim').addEventListener('change', function (){
    document.getElementById('approved').style.display = 
        this.value == "10" ? 'block' : 'none';

    document.getElementById('tortm').style.display = 
        this.value == "14" ? 'block' : 'none';

    document.getElementById('enddate').style.display = 
        (this.value == "13" || this.value == "17") ? 'block' : 'none';
});

如果值为"13"，这将设置'enddate'显示或如果值为"17"。

Answer 2

你不能有两个具有相同 id 的元素，因为 id 是唯一的标识符。您必须找到一种方法为表格分配单独的 ID。

如果你想做这样的事情，你可以给他们同样的名字（或类），然后做这样的事情：

var style = this.value == "13" ? 'block' : 'none';
document.getElementsByName('enddate')[0].style.display = style; //First enddate element
style = this.value == "17" ? 'block' : 'none';
document.getElementsByName('enddate')[1].style.display = style; //Second enddate element

此外，每次您编写var style = ... 时，您都在定义一个新变量。与上面类似，变量不应该真正具有相同的名称。所以你应该给他们不同的名字，或者从除第一个之外的所有关键字中删除var。

编辑：

我刚刚意识到这个问题并没有我想的那么清楚：您可能的意思是如果从菜单中选择了 13 或 17，则样式并不总是应用于单个元素？

在这种情况下，您需要一个 if 语句来确定是否选择了 13 OR 17，并应用正确的样式。例如：

if((this.value == "17")||(this.value == "13")) {
  document.getElementById('enddate').style.display = "block";
} else {
  document.getElementById('enddate').style.display = "none";
}

您的代码的问题是对 17 的检查是单独进行的，并且在检查 13 之后会覆盖该样式。 Therefore nothing happened when 13 was selected.