Question

我正在处理的页面包含一个带有id＆＃34; div＆＃34;的div元素，一个ID为＆＃34的按钮; copy＆＃34;和第二个按钮，ID为＃34;数组＆＃34;。 div元素包含文本＆＃34;考试1＆＃34;当＆＃34;复制＆＃34;单击按钮，每次单击按钮时都会复制此div。＆＃34;阵列＆＃34;按钮应该添加这些＆＃34;考试＆＃34; divs到一个数组并使用alert函数显示数组的长度。我无法弄清楚如何在单击按钮时将这些div元素添加到数组中。

这是我到目前为止的HTML（这也包括Javascript和CSS）：

<html>
    <head>
        <title>Exam 1 Tanner Taylor</title>
        <style type="text/css">
            #exam {
                border: 2px double black;
            }
        </style>
    </head>

    <body>
        <div id="exam">
        Exam 1
        </div>
        <input type="button" id="copy" value="Make Copy" onclick="copy()" >
        <input type="button" id="array" value="Get Array" onclick="makeArray()">
    </body>

    <script type = "text/javascript">
            var TTi = 0;
            var TToriginal = document.getElementById("exam");
            function copy() {
                var TTclone = TToriginal.cloneNode(true);
                TTclone.id = "exam";
                TToriginal.parentNode.appendChild(TTclone);
            }

            function makeArray() {
                var TTexam[];
                for(var TTindex = 0; TTindex < TTexam.length; ++TTindex) {

                }
            }   
        </script>
</html>

还有更多内容，但我删除了实际上没有解决此问题的部分。正如您所看到的，我已经启动了makeArray（）函数，但是我不确定从哪里开始，我觉得这是我需要最多帮助的函数。有什么建议吗？

Answer 1

我会在考试div中添加一个班级名称，并使用getElementsByClassName()获取该班级的所有div。

HTML：

<body>
    <div id="exam" class="exam">
        Exam 1
    </div>
    <input type="button" id="copy" value="Make Copy" onclick="makeCopy()" />
    <input type="button" id="array" value="Get Array" onclick="makeArray()" />
</body>

JS：

var TTi = 0;
var TToriginal = document.getElementById("exam");

function makeCopy() {
    console.log('copy');
    var TTclone = TToriginal.cloneNode(true);
    TToriginal.parentNode.appendChild(TTclone);
}

function makeArray() {
    var TTexam = document.getElementsByClassName("exam");
    alert(TTexam.length);
    for(var TTindex = 0; TTindex < TTexam.length; ++TTindex) {
        console.log(TTexam[TTindex]);        
    }
}

您可以使用您想要的任何业务逻辑替换alert()和console.log()。

在http://jsfiddle.net/JohnnyEstilles/w6fdm5th/查看工作小提琴。

Answer 2

您可能会提出一些建议和建议：首先，id-attributes应该是唯一的，因此最好使用类名：

<div class="exam">Exam 1</div>
<input type="button" id="copy" value="Make Copy" onclick="copy()">
<input type="button" id="array" value="Get Array" onclick="makeArray()">

对于剧本：

var TTexam = [];

function copy() {
   var TToriginal = document.getElementsByClassName("exam")[0];
   var TTclone = TToriginal.cloneNode(true);
   TToriginal.parentNode.appendChild(TTclone);
}

function makeArray() {
   alert(TTexam.length);
   for (var TTindex = 0; TTindex < document.getElementsByClassName("exam").length;     TTindex++)
   {
     TTexam.push(document.getElementsByClassName("exam")[TTindex]);
   }
   alert(TTexam.length);
}

那只适合初学者。 TTexam是一个定义为全局的数组，以防两个函数都可以访问它。但问题究竟是你想要做什么 - 如果你想在完成添加div时只生成一次数组，或者每次点击“Get Array＆＃”时都可以生成一个包含所有div的新数组39 ;.然后应该在makeArray() - 函数中定义数组为了避免在全局定义的情况下在阵列中具有与双精度相同的div，它将例如可以为每个新创建的div添加带有计数器的数据属性，并且在第二次创建数组时，只添加新的数组。或者，当使用TTexam.push(TTclone);函数中的copy()添加每个新div时，可以将其添加到数组中。

在按钮单击时将div元素添加到数组

2 个答案: