Question

这是我第一次使用变量，但我似乎无法做到这一点。

我想要实现的是在点击时显示隐藏的网络摄像头流。因此，当按下“c1”时，相机1显示，如果先前打开了网络摄像头2，则会隐藏摄像头2。

我知道如何在没有变量的情况下实现这一目标，但我正在努力了解有关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

我不确定你的问题是什么，看看这个，也许可以帮到你：

＆＃13;

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

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用变量显示隐藏的div

2 个答案: