单击按钮时未隐藏元素

Element not hidden when button is clicked

本文关键字：隐藏 元素 按钮 单击      更新时间：2023-09-26

为什么在jsFiddle中单击按钮时display = "none"不工作？

HTML:

<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>

JavaScript:

$('input[type=button]').click( function() {
 document.getElementsByClassName("hidden").style.display = "none";
});

document.getElementsByClassName()返回类似于Array的对象HTMLCollection。您正在尝试对此数组应用HTML节点属性。

首先从这个数组中选择DOMNode，然后应用样式属性，如下所示。

document.getElementsByClassName("hidden")[0].style.display = "none";


$('input[type=button]').click( function() {
 document.getElementsByClassName("hidden")[0].style.display = "none";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />

或者，您可以使用jQuery来隐藏元素。

$('input[type=button]').click(function() {
  $(".hidden").first().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
  <div class="hidden">This is a hidden heading</div>
  <div>Notice that the hidden heading still takes up space.</div>
  <hr/>
  <input type="button" value="test" />

在纯JavaScript中，您可以按如下方式执行：

var button = document.getElementsByClassName('button')[0];
button.addEventListener('click', function() {
 document.getElementsByClassName("hidden")[0].style.display = "none";
}, false);
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input class="button" type="button" value="test" />

您可以使用jQuery轻松地完成这项工作，因为您已经将其包含在项目中，所以没有开销。只需使用hide()从视图中删除元素：

$('input[type=button]').click(function() {
    $(".hidden").hide();
});

工作示例

document.getElementsByClassName返回一个类数组。

选择数组的第一个元素。

$('input[type=button]').click( function() {
 document.getElementsByClassName("hidden")[0].style.display = "none";
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" id="test" value="test" />

这是更新的jsFiddle

不需要混合jQuery和JavaScript，这里有一个JS方法：

document.querySelector('input').onclick = function() {
  document.querySelector('.hidden').style.display = "none";
}

getElementsByClassName不能工作的原因是它是一个数组。您需要循环遍历它和display:hide;，或者在它后面附加[n]（n是数组中所需元素的编号，从0开始）来获得特定的元素。

document.querySelector('input').onclick = function() {
  document.querySelector('.hidden').style.display = "none";
}
<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>
<hr/>
<input type="button" value="test" />

当页面上使用jQuery时，为什么要使用Native JS。

http://jsfiddle.net/ritesh14887/pUeue/3442/

$('input[type=button]').click( function() {
 $(".hidden").css('display','none');
});
相关文章：