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

Question

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

Code in 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

使用the 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>