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要素を表示/非表示にするショートカットです。

また、DOMの要素の代わりに.ready()をドキュメントに使用することをお勧めします。

だから、あなたのJSコードは次のようになります。

$(document).ready(function() { 

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

}); 

DEMO

Answer 2

トグルは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を取得カント、ここ

1. をいくつかミスをしています方法。メソッドdocument.getElementsByClassName()を使用する必要があります。

2. document.getElementsByClassName()返信a NodeList。 NodeListにCSSを適用することはできません。だから、

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

   ように変更する必要がありますあなたのコードを操作するにはdocument.getElementsByClassName('DivBlue')[0]

を使用してCSSを適用するノードを選択する必要があります