單擊按鈕時元素未隱藏

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