Zeigen/Verstecken Div durch Klicken auf ein anderes div

Question

Ich bin ein Anfänger bei Javascript und ich schrieb einen einfachen Code versuchen, ein div einfach durch Klicken auf ein anderes Div. Wenn jemand den Code überprüfen kann, den ich geschrieben und korrigiert habe, wäre ich wirklich dankbar. Danke im Voraus.

$('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

Sie können dies mit der toggle() Funktion in der jQuery-Bibliothek. toggle() ohne Argumente ist eine Verknüpfung zum Anzeigen/Verbergen eines DOM-Elements.

Es ist auch eine gute Praxis, .ready() für das Dokument anstelle eines Elements des DOM zu verwenden.

So sollte Ihr JS-Code wie folgt aussehen:

$(document).ready(function() { 

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

}); 

DEMO

Answer 2

Toggle funktioniert der Trick in jQuery:

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

Answer 3

Ersetzen Sie JavaScript mit diesem und es wird sicher funktionieren.

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

Answer 4

Sie machen einige Fehler hier,

1. Sie kann ein div durch einen Klassennamen erhalten mit document.getElementById() Methode. Sie müssen document.getElementsByClassName() Methode verwenden.

2. document.getElementsByClassName() geben Sie eine NodeList zurück. Sie können CSS für eine NodeList nicht anwenden. Sie müssen also einen Knoten auswählen CSS anwenden mit document.getElementsByClassName('DivBlue')[0]

Code arbeiten sollte als

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

geändert werden