所以,我的网站上有一个视频流。我有一个默认的 Cam 1,这是代码:
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-video-camera"></i> CCTV
<span class="float-right" id="addcam"><a href="#" onclick="addCamera();">+ add camera</a></span>
</div>
<div class="card-body" id="camera-body">
<p><strong>Cam 1</strong></p>
<iframe id="cam1" class="container-fluid mb-4" height="500" src="https://www.youtube.com/embed/D-EcyYkv-mU"></iframe>
</div>
</div>
如果我点击(+ 添加摄像头),它会调用 js 函数 addCamera();
这是我的 js 脚本 (jquery) 中的代码:
<script>
function addCamera() {
<?php $camNumber = 1; $camNumber += $camNumber; ?>
$("div#camera-body").append("<hr id=\"remove\" style=\"border: 0.2px solid black;\">");
$("div#camera-body").append("<p id=\"remove\"><strong><?php echo h("Cam " . $camNumber) ?></strong><a href=\"#\" class=\"float-right mr-3\" onclick=\"removeCamera();\" style=\"color:black;\">X</a></p>");
$("div#camera-body").append("<iframe id=\"remove\" class=\"container-fluid mb-4\" height=\"500\" src=\"https://www.youtube.com/embed\"></iframe>");
}
function removeCamera() {
$("iframe#remove, p#remove, hr#remove").remove();
}
</script>
添加时如何增加凸轮的数量?而且我在添加相机时在右上角放了一个 (x),所以如果你想删除你添加的相机,有一个选项。不过,第一个/默认凸轮不会被删除。
请帮忙,谢谢!
最佳答案
我现在可以正常使用了,但仅在相机编号上递增。这是我的代码:
<script>
var camNum = document.getElementsByTagName('iframe');
camNum.length;
function addCamera() {
$("div#camera-body").append("<p><strong>Cam " + camNum.length + "</strong></p><iframe class=\"container-fluid mb-4\" height=\"500\" src=\"https://www.youtube.com/embed\"></iframe>");
}
</script>
关于javascript - 如何使用 jquery 永久添加元素,然后它会逐渐添加数字,例如 Cam 1、Cam 2、Cam 3 等。使用 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49104653/