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

Question

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

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

等

然后根据从 select 菜单中选择的值显示元素，使用此：

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;
});

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

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

如果更容易的话，我也很乐意使用附加到 select 上的 onchange 的函数？我只使用 addeventlistener，因为对 Whosebug 的搜索得出了那个特定的解决方案。

干杯莱斯

Answer 1

删除所有这些 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';
});

这将设置 'enddate' 在值为 "13" 时显示或如果值为 "17".

Answer 2

~~不能有两个具有相同 ID 的元素，因为 ID 是唯一标识符。您必须找到一种方法来为表提供单独的 ID。~~

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

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 或 17，并应用正确的样式。例如：

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

您的代码的问题是 17 的检查是单独完成的，在检查 13 之后覆盖了该样式。因此，选择13时什么都没发生。

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

Javascript hide and display elements by id not working for multiple cases

html

javascript

var

getelementbyid

addeventlistener