Question

我正在写一个页面，同时与多个摄像头进行交互。因为我有一个页面，基本上有一组控制，调用Javascript重复X个时间的只有名称和1变量的变化。有没有办法读取文档并将其写入X次并在每次传递中仅替换那些值？我知道如何在PHP中完成它，但我希望能够在客户端做到这一点。

基本上你有：

<div name="camera1" style="left:100px">
<input type="button" onclick="setFps(1)">
</div>

每次传递需要更改100px和1。

Answer 1

<script>
for(var i = 0; i < 10; i++)
    document.write('<div name="camera'+i+'" style="left:100px;"><input type="button" onclick="setFps(1)"></div>');
</script>

但是，除非你有充分的理由这样做，否则我不建议这样做。这只是最容易实现的方式，而且事实上这是你唯一的帖子，它只是一个简单的谷歌搜索，这就行了。

Answer 2

我会这样做：

---HTML---
<div id="cameraDisplay">
    <script>displayCameras()</script>
</div>

---Javascript---
function displayCameras()
{
    var parent = document.getElementById("cameraDisplay");
    parent.innerHTML = ""; //Clear parent before adding cameras

    var fpsValues = [1, 2, 3, ...]; //Array of all the FPS integers
    var leftValues = [100, 200, 300, ...]; //Array of all the left stylings

    for (var i = 0; i < numberOfCameras; i++)
    {
        var camera = document.createElement("div");
        camera.setAttribute("name", "camera" + i.toString());
        camera.style.left = leftValues[i].toString + "px";

        var input = document.createElement("input");
        input.type = "button";
        (function() { //Create an anonymous function to store correct value of i - otherwise mutable errors occur
            var fps = i;
            input.onclick = function() {setFps(fpsValues[fps]);};
        })();

        camera.apendChild(input);
        parent.appendChild(camera);
    }
}

多次写元素

2 个答案: