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

});

DEMO

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

你在这里犯了一些错误，

您无法使用document.getElementById()方法通过类名获取div。您需要使用document.getElementsByClassName()方法。
document.getElementsByClassName()返回NodeList。您不能为NodeList应用CSS。因此，您需要使用document.getElementsByClassName('DivBlue')[0]

要将代码更改为

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

单击另一个div显示/隐藏Div

4 个答案: