单击按钮时元素未隐藏

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节点，然后应用样式属性，如下所示。

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

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

Answer 2

您可以使用jQuery轻松做到这一点，因为您已经将其包含在项目中，因此没有任何开销。 只需使用hide()从视图中删除该元素：

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

工作示例。

Answer 3

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

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

Answer 5

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

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

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