代码之家 › 专栏 › 技术社区 › Les

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

addeventlistener var getelementbyid html javascript

0

Les · 技术社区 · 10 年前

我真的不知道任何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可能会冒犯程序员;-)

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

干杯女同性恋

2 回复 | 直到 10 年前

1

Cerbrus 10 年前

删除所有这些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" 或如果值为 "17" .

2

0

Daniel Causebrook 10 年前

~~不能有两个具有相同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或17,并应用正确的样式。例如:

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

代码的问题是,17的检查是单独进行的,在13的检查之后,覆盖了该样式。因此,当选择13时没有发生任何事情。