通過單擊另一個div顯示/隱藏Div

Question

我是javascript的初學者，我寫了一個簡單的代碼，試圖通過單擊另一個div來顯示/隱藏div。 如果有人可以檢查我編寫的代碼並更正我，我將不勝感激。 提前致謝。

$('DivBlue').ready(function() {
    $('DivRed').on('click', function(){
        document.getElementById('DivBlue').style.display = 'block';
    });
});

.DivRed{
  position:absolute;
  top:0;
  left:0;
  width:15vw;
  height:15vw;
  background-color:red;
}

.DivBlue{
  position:absolute;
  display:none;
  right:0;
  bottom:0;
  width:15vw;
  height:15vw;
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivRed"></div>
<div class="DivBlue"></div>

Answer 1

您可以使用jQuery庫中的toggle（）函數執行此操作。 不帶參數的toggle()是一個快捷方式，用於顯示/隱藏DOM元素。

同樣，優良作法是在文檔上使用.ready()而不是DOM的元素。

因此，您的JS代碼應如下所示：

$(document).ready(function() {

    $('.DivRed').on('click', function(){
        $('.DivBlue').toggle();
    });

}); 

演示

Answer 2

Toggle在jQuery中發揮了作用：

$(document).ready(function() {
  $('.DivRed').on('click', function() {
     $('.DivBlue').toggle();
  });
});

Answer 3

以此替換您的JavaScript，它肯定會起作用。

$(document).ready(function() {
  $('.DivRed').click(
           function() {
     $('.DivBlue').toggle();
  });
});

Answer 4

您在這里犯了一些錯誤，

1. 您無法使用document.getElementById()方法通過類名稱獲取div。 您需要使用document.getElementsByClassName()方法。

2. document.getElementsByClassName()返回一個NodeList 。 您不能將CSS應用於NodeList。 因此，您需要選擇一個節點以使用document.getElementsByClassName('DivBlue')[0]應用CSS

為了工作，您的代碼應更改為

$('DivBlue').ready(function() {
    $('DivRed').on('click', function(){
        document.getElementsByClassName('DivBlue')[0].style.display = 'block';
    });
});