javascript - 如何使用 jquery 永久添加元素，然后它会逐渐添加数字，例如 Cam 1、Cam 2、Cam 3 等。使用 iframe

Question

所以，我的网站上有一个视频流。我有一个默认的 Cam 1，这是代码:

<div class="card mb-3">
    <div class="card-header">
        <i class="fa fa-video-camera"></i> &nbsp;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)，所以如果你想删除你添加的相机，有一个选项。不过，第一个/默认凸轮不会被删除。

请帮忙，谢谢!

Answer 1

我现在可以正常使用了，但仅在相机编号上递增。这是我的代码:

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