Question

我有一些代码可以在main.js文件中复制

Javascript重复示例：

DriveInfo.GetDrives().StartsWith("G:")

正如您所看到的，示例执行相同的创建元素，但有几个参数因示例而异。我如何制作一个可以用于所有这些功能的功能？现在我只知道如何为一个特定的例子构建一个如此 - ＆gt;

Example 1
for (i = userVote; i < 5; i++) {
var newVotesInput = document.createElement("input");
newVotesInput.id = "vote" + i;
newVotesInput.classList.add("vote", "displayn");
newVotesInput.type = "radio";
newVotesInput.name = "vote";
newVotesInput.value = i;
someElement.appendChild(newVotesInput);
}

Example 2
for (i = 1; i <= userVote; i++) {
var newVotesLabel = document.createElement("label");
newVotesLabel.id = "voteLabel" + i;
newVotesLabel.classList.add("voteHover");
newVotesLabel.htmlFor = "vote" + i;
someElement.appendChild(newVotesLabel);
}

Example 3
var newImg = document.createElement("img");
newImg.classList.add("babeImg", "boxsb", "leftIn");
newImg.id = "imgSrc";
newImg.src = jsonData.imgSrc;
someElement.appendChild(newImg);

Example 4
var newShuffle = document.createElement("img");
newShuffle.classList.add("shuffleImg");
newShuffle.id = "shuffleImg";
newShuffle.src = "assets/img/refresh.png";
someElement.appendChild(newShuffle);

Example 5
newImg.classList.add("babeImg", "boxsb", "leftIn");
newImg.id = "imgSrc";
newImg.src = jsonData.imgSrc;
imgInner.appendChild(newImg);

这是基本的例子4 ..但是我如何在所有例子中使这更有效和可用？

Answer 1

我建议使用以下功能：

function createElement(type, attributes) {
  var element = document.createElement(type);
  for (var key in attributes) {
    if (key == "class") {
        element.classList.add.apply(element.classList, attributes[key]); // add all classes at once
    } else {
      element[key] = attributes[key];
    }
  }
  someElement.appendChild(element);
}

该函数采用类型（input，img等）和属性列表（即对象/字典）。我们遍历属性并将它们添加到新元素。唯一的特例是使用类，使用不同的语法（我们可以有多个类）。以下是如何使用它：

var input = createElement("input", {
  "id": "myId",
  "class": ["one-class", "another-class"],
  "name": "someName"
});

请注意，class有一个数组作为值。

结果将是：

<input id="myId" class="one-class another-class" name="someName">

这是jsfiddle。

修改

为了更好地理解：在JS中，对象就像字典，即一堆键值对（和prototypes，但这对于这个讨论并不重要。）

如果您有一个具有id属性的对象，则可以使用以下语法之一访问它：

myObject.id // object style myObject["id"] // dictionary style

第二种语法非常有用，因为您可以使用变量来访问对象属性：

var attr = "id"; myObject[attr];

现在，我们也可以迭代一个对象，就像我们对数组一样。唯一的区别是对于数组，for in语法返回索引，而对象返回key或属性名称。

var myObject = { "id": 1, "name": "a name" }; // a basic object for(var key in myObject) console.log(key, myObject[key]); // will print // id 1 // name a name

如果你理解这两个机制，我给你的代码会更加清晰。

Answer 2

不幸的是，没有足够的声誉来评论the accepted answer 由@Derlin撰写，因此我不得不发布自己的信息。请阅读此内容作为对上述答案的评论/建议。

使用您的代码，像这样设置属性：

element[key] = attributes[key];

仅允许 预先建立的 HTML属性适用于创建的元素标记。因此；

var div = createElement("input", {
      "id": "myId",
      "class": ["one-class", "another-class"],
      "name": "someName",
      "size": "40",
      "data-name": "someName",
      "data-value": "helllloooo"
    });

将返回此值；

<input id="myId" class="one-class another-class" name="someName" size="40">

====>也许改为使用setAttribute（）函数，即：

element.setAttribute(key, attributes[key]);

以便输出所有这样的 custom 属性；

<input id="myId" class="one-class another-class" name="someName" size="40" data-name="someName" data-value="helllloooo">

Javascript createElement函数

2 个答案: