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

Javascript doesn't seem to unhide my element

本文关键字：隐藏 我的 元素 取消 并没有 Javascript      更新时间：2023-09-26

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

JSfiddle 中的代码：
目录：

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

将 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 方法e

$('[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 methode

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>

你在if块中缺少返回。

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

语句后面的内容将始终运行，因为函数不会仅仅因为 if 条件为真而停止。此外，将值设置为块的语句具有双 =。不应该。

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

首先，您需要在设置 "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";
    }
};

在你的JSFiddle中，请改变你声明函数的方式，使其全局化，或者将JS设置为No Wrap(在head中(。 (有关更多信息，请参阅此问题(

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

这只是仅使用 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>

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

相关文章：