Question

我正在使用动态字段构建内容，并且希望能够为每个字段编号，以便可以使用POST请求。

有没有一种方法可以增加自定义属性，以便知道哪个字段？

var qID = 0;

<div class="questionContainer" data-question-id="qID"></div>

qID++;

我已经尝试过了，但是它只是将属性转换为字符串。谢谢！

Answer 1

您可以在生成所有内容后执行

let cnt=0;    
document.querySelectorAll(".questionContainer")
  .forEach(el => el.setAttribute("data-question-id",cnt++) )

或

let cnt=0;    
document.querySelectorAll(".questionContainer")
  .forEach(el => el.dataset.questionId=cnt++)

您将需要

[...document.querySelectorAll(".questionContainer")].forEach

获得IE支持

[...document.querySelectorAll(".questionContainer")]
.forEach((el, i) => {
  el.dataset.questionId = i;
  el.innerText = "Question #"+(i + 1)
})

<div class="questionContainer" data-question-id="qID"></div>
<div class="questionContainer" data-question-id="qID"></div>
<div class="questionContainer" data-question-id="qID"></div>
<div class="questionContainer" data-question-id="qID"></div>
<div class="questionContainer" data-question-id="qID"></div>

Answer 2

HTML属性无法从JavaScript变量中提取数据。

通过JavaScript程序将数据的属性值设置为，数据只能仅从HTML变量移至HTML属性。

您可以：

使用document.write来写出 entire 元素的HTML（包括开始标记，结束标记和所有内容）。

使用DOM方法（createElement等）写出相同内容

选择元素（例如，使用querySelectorAll查找类的所有元素，然后遍历它们）并使用dataset API

有没有办法增加自定义HTML属性？

2 个答案: