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>