Javascript 使用变量显示隐藏的div

这是我第一次处理变量，但我似乎无法正确处理它

我想要实现的是在单击显示时显示隐藏的网络摄像头流。 因此，当按下“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');
    });
});

}))

CAM1
CAM2

---

提前谢谢你的帮助

我不知道你有什么问题，看看这个，也许可以帮你：

$（窗口）.load（函数（）{
$（'#cam1'）.show（）；
});
$（'.c1.c2'）。单击（函数（）{
$（'cam1，'cam2'）。衰减切换（1000）；
});
.btn{背景：#333；颜色：白色；填充：10px 20px；光标：指针；边框：实心1px#333；}
.btn:hover{背景：#ddd；颜色：#333；}
.camList{位置：相对；高度：200px；}
.camBox{宽度：300px；高度：200px；边框：实心1px#333；文本对齐：居中；显示：无；位置：绝对；颜色：白色；字体大小：30px；}
.red{背景：red；}
.blue{背景：blue；}

启动凸轮1
启动凸轮2

这是凸轮1

这是凸轮2

试试这个：


$（文档）.ready（函数（）{
$c1=$（'.c1'）；
$c2=$（'.c2'）；
$cam1=$（“#cam1”）；
$cam2=$（“#cam2”）；
$c1.“点击”，函数（）{
$cam1.fadeIn（500）；
$cam2.淡出（500）；
})
$c2.“点击”，函数（）{
$cam2.fadeIn（500）；
$cam1.淡出（500）；
})
})




CAM1
CAM2

能否提供HTMLW此设置的确切问题是什么？此外，jQuery还提供了
.hide（）
和
.show（）
来分别将display css属性设置为
none
和
block
不确定这是打字错误还是您的实际代码，但您在第一个'fadeToggle（）中缺少了一个“L”）“functionI添加了HTML@DrydenLong，这是一个输入错误，但没有改变情况。问题是什么？有错误吗？谢谢你花时间回答，但这样我知道如何实现它，我想让它使用变量工作！就像一个迷人的兄弟！谢谢你抽出时间！
            <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>