Question

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

Answer 1

document.getElementsByClassName()返回HTMLCollection这是一个类似于Array的对象。您正尝试在此阵列上应用HTML节点属性。

首先从此数组中选择DOM Node，然后应用样式属性，如下所示。

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

在Pure JavaScript中，您可以按照以下方式执行此操作：

＆＃13;

var button = document.getElementsByClassName('button')[0];

button.addEventListener('click', function() {
 document.getElementsByClassName("hidden")[0].style.display = "none";
}, false);

＆＃13;

<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" />

＆＃13;

Answer 2

你可以使用jQuery轻松完成它，你已经把它包含在你的项目中，所以它没有开销。只需使用hide()从视图中删除元素：

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

<强> Working example.

Answer 3

document.getElementsByClassName返回一个类数组。

选择了数组的第一个元素。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

以下是更新后的jsFiddle

Answer 4

无需混合使用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" />

unittest

Answer 5

为什么在页面上使用jQuery时使用Native JS。

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

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

单击按钮时未隐藏元素

5 个答案: