変数を使って隠しdivを表示

Question

これは初めて変数を扱っていますが、私はこの権利を得ることはできません。

私が達成したいのは、クリックしたときに非表示のウェブカメラストリームを表示することです。 「c1」を押すとカメラ1が表示され、webcam 2が以前に開いていた場合はwebcam2が非表示になります。

私は変数なしでこれを達成する方法を知っていますが、私はjqueryについてもっと学びたいと思っています。

$(document).ready(function(){ 
var $c1 = $('.c1'), 
    cam1 = $('#cam1'), 
    $c2 = $('.c2'), 
    cam2 = $('#cam2'); 

$c1.click(function(){ 
    cam1.fadeTogge(1000, function){ 
     cam2.css('display: none'); 
    }); 
}); 

$c2.click(function(){ 
    cam2.fadeToggle(1000, function){ 
     cam1.css('display: none'); 
    }); 
}); 

}）;

  <div class="area"> 
     <div class="padWrapper"> 
      <ul> 
       <li class="borderRadius"><a href="">RAYMOND</a></li> 
       <li class="borderRadius"><a href="">STORAGE</a></li> 
        <ul> 
         <li class="c1" style="border-radius: 20px 20px 0px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);">CAM1</li> 
         <li class="c2" style="border-radius: 0px 0px 20px 20px;">CAM2</li> 
        </ul> 
      </ul> 
        <div class="pad borderRadius"> 
        </div> 
     </div> 
      <div class="dispWrapper"> 
       <div class="display borderRadius"> 
       <img id="cam1" src="http://192.168.0.102:9000/?action=stream"></img> 
       <img id="cam2" src="http://192.168.0.103:9000/?action=stream"></img> 
       </div> 
      </div> 
    </div> 

先生の助けをありがとう！

Answer 1

：

$(document).ready(function() { 
 
    
 
    $c1 = $('.c1'); 
 
    $c2 = $('.c2'); 
 
    $cam1 = $('#cam1'); 
 
    $cam2 = $('#cam2'); 
 
    
 
    $c1.on("click",function(){ 
 
     $cam1.fadeIn(500); 
 
     $cam2.fadeOut(500); 
 
    }) 
 
    
 
    $c2.on("click",function(){ 
 
     $cam2.fadeIn(500); 
 
     $cam1.fadeOut(500); 
 
    }) 
 

 
})

<div class="area"> 
 
    <div class="padWrapper"> 
 
     <ul> 
 
      <li class="borderRadius"><a href="">RAYMOND</a></li> 
 
      <li class="borderRadius"><a href="">STORAGE</a></li> 
 
      
 
      <li class="c1" style="border-radius: 20px 20px 0px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);">CAM1</li> 
 
      <li class="c2" style="border-radius: 0px 0px 20px 20px;">CAM2</li> 
 
     </ul> 
 
     
 
     <div class="pad borderRadius"></div> 
 
     
 
     </div> 
 
    <div class="dispWrapper"> 
 
     <div class="display borderRadius"> 
 
      <img id="cam1" src="http://192.168.0.102:9000/?action=stream" alt="image1"> 
 
      <img id="cam2" src="http://192.168.0.103:9000/?action=stream" alt="image2"> 
 
     </div> 
 
    </div> 
 
    
 
</div>  
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

私はあなたの問題が何であるか、これを見てわからないんだけど、多分あなたを助けることができる：これを試してみてください

$(window).load(function(){ 
 
    $('#cam1').show(); 
 
}); 
 
$('.c1,.c2').click(function(){ 
 
    $('#cam1,#cam2').fadeToggle(1000); 
 
});

.btn{background:#333;color:white;padding:10px 20px;cursor:pointer;border:solid 1px #333;} 
 
.btn:hover{background:#ddd;color:#333;} 
 
.camList{position:relative;height:200px;} 
 
.camBox{width:300px;height:200px;border:solid 1px #333;text-align:center;display:none;position:absolute;color:white;font-size:30px;} 
 
.red{background:red;} 
 
.blue{background:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="buttons"> 
 
    <div class="container"> 
 
     <button class="btn c1">Start cam1</button> 
 
     <button class="btn c2">Start cam2</button> 
 
     <hr> 
 
     <div class="camList"> 
 
      <div id="cam1" class="camBox red"><p>This is the cam 1</p></div> 
 
      <div id="cam2" class="camBox blue"><p>This is the cam 2</p></div> 
 
     </div> 
 
    </div> 
 
</div>