Javascript似乎没有取消隐藏我的元素

Question

我已经在jsfiddle中编写了以下代码，如果我选中了该复选框，则div Nime应该被隐藏，反之亦然，但是这没有发生，我在做什么错？

JSfiddle中的代码：
HTML：

<label>Newspaper?</label>
        <input type="checkbox" name="nieu" onclick="change()"><br/><br/>
    <div id="nime">
    <label>How?</label>
        <select name="nime"> 
            <option value="email">Email</option>
            <option value="post">Post</option>
            <option value="beide">Both</option>
        </select>
    </div>

使用Javascript：

function change(){
    which = document.getElementById('nime');

    if(which.style.display=="block"){
        which.style.display="none";
    }else{
        which.style.display="block";
    }

};

Answer 1

您缺少if块中的返回。

function change(){
    which = document.getElementById('nime');
    if(which.style.display=="block"){
        which.style.display="none";
        return;
    }
    which.style.display="block"
}

Answer 2

将classList API与Element.querySelector（）API一起使用

 function change(){ which.classList.toggle('visibility');// toggle a given class each time we click on the element woth the name nieu }; var which = document.querySelector('#nime'),// get element with ID=nime //which = document.querySelector('[id=nime]'), nieu = document.querySelector('[name=nieu]');// get element with name=nime // add the click event to nieu nieu.addEventListener("click", change, false) 

 .visibility{ /*this is our class to hide the element*/ display: none } 

 <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id="nime"> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

与加载时的隐藏状态相同，只需添加类.visibility

 function change(){ which.classList.toggle('visibility'); }; var which = document.querySelector('#nime'), nieu = document.querySelector('[name=nieu]'); nieu.addEventListener("click", change, false) 

 .visibility{ display: none } 

 <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id=nime class=visibility> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

替代javascript

您可以使用jquery来简化生活，但建议使用JS

 $('[name=nieu]').click(function(){ $('#nime').toggleClass("visibility") }) 

 .visibility{ display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id="nime"> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

隐藏加载时的元素，只需向其添加类

 $('[name=nieu]').click(function(){ $('#nime').toggleClass("visibility") }) 

 .visibility{ display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id="nime" class=visibility><!-- add class visibility--> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

或者如果您不想添加CSS

jQuery方法

 $('[name=nieu]').click(function(){ $('#nime').is(":visible") ? $('#nime').hide(): $('#nime').show() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id="nime" class=visibility><!-- add class visibility--> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

javascript方法

 function change(){ which.style.display == "none"? which.style.display = "block" : which.style.display = "none" }; var which = document.querySelector('[id=nime]'), nieu = document.querySelector('[name=nieu]'); nieu.addEventListener("click", change, false) 

 <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id="nime"> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

Answer 3

if语句之后的内容将始终运行，因为该函数不会仅仅因为if条件为true而停止。 另外，将值设置为block的语句具有double =。 它不应该。

if(which.style.display=="block"){
    which.style.display="none";
} else {
    which.style.display="block";
}

Answer 4

在您的JSFiddle中，请更改声明函数的方式以使其成为全局函数，或将JS设置为No Wrap（在头部）。 （ 有关更多信息，请参见此问题 ）

window.changing = function() { // }

初始帖子中的其他注意事项：将显示设置为阻止时，您有两个等号，但不设置该值。 使用一个。 另外，您需要在if语句（或if / else）内返回，否则它将始终运行其余代码。

window.changing = function() {
    which = document.getElementById('nime');

    if(which.style.display=="block"){
        which.style.display="none";
        return; // otherwise the line below is always shown
    }

    which.style.display = "block"; ///// THIS LINE I EDITED
};

Answer 5

首先，您需要在设置“ display = none”时退出函数change（）或在“ else”语句中包装“ display = block”，否则无论以前的版本是什么，它都将设置“ display = block”值。

实际上，当前您没有在if（）之后设置“ display = block”，因为您使用的是比较运算符（“ ==”）而不是赋值运算符（“ =”）。

您的函数change（）应该为：

function change(){
    which = document.getElementById('nime');

    if(which.style.display=="block") {
        which.style.display="none";
        return;
    }
    which.style.display="block";
};

要么

function change(){
    which = document.getElementById('nime');

    if(which.style.display=="block") {
        which.style.display="none";
    }
    else {
        which.style.display="block";
    }
};

Answer 6

使用onchange事件和函数，如下所示

function change(){
var which = document.getElementById('nime');
var display = window.getComputedStyle(which, null).getPropertyValue('display');

if(display == 'none') {
    which.style.display = 'block';
    return;
}

if (display == 'block') {
 which.style.display = 'none';
    return;
}

}

HTML

<label>Newspaper?</label>
    <input type="checkbox" name="nieu" onchange="change()"><br/><br/>
<div id="nime">
<label>How?</label>
    <select name="nime"> 
        <option value="email">Email</option>
        <option value="post">Post</option>
        <option value="beide">Both</option>
    </select>
</div>

http://jsfiddle.net/pwx0gs2e/23/

Answer 7

这只是仅使用CSS的替代方法

通用兄弟选择器

 #nime{display: none} [name=nieu]:checked ~ #nime{display: block} 

 <label>Newspaper?</label> <input type="checkbox" name="nieu"><br/><br/> <div id="nime"> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div> 

CSS相邻选择器

删除<br/><br/>

 #nime{display: none;clear: both} [name=nieu]:checked + #nime{display: block} 

 <label>Newspaper?</label> <input type="checkbox" name="nieu"> <div id="nime"> <label>How?</label> <select name="nime"> <option value="email">Email</option> <option value="post">Post</option> <option value="beide">Both</option> </select> </div>