使用 javascript 在具有唯一 ID 的 html 标签标签中显示数组中的文本

Question

我是 javascript 的新人，我有以下 html 代码：

<form role="form" >       
<label for="element1" id="element1_label"></label>
<input type="text" id="element1" />

<label for="element2" id="element2_label"></label>
<input type="text" id="element2" name="element2">

<label for="element3" id="element3_label"></label>
<input type="number" id="element3" name="element3s">

<button type="submit" >submit</button>

我想通过以下 javascript 代码显示 options 数组中的一些文本：

       var piced = 'opt';
        var options = {
            opt: {
                element1_label: "text1",
                element2_label: "text2",
                element3_label: "text3",
            },
            newopt: {
                element1_label: "new text1",
                element2_label: "new text2",
                element3_label: "new text3",
            }
        };

        jQuery('label').each(function()
        {
            jQuery(this).innerText = options[piced][jQuery(this).attr('id')];

        });

我想在每个 html 标签值中显示这种 piced 数组的索引。例如：

<label for="element1" id="element1"> text1 </label>
<input type="text" id="element1" />

<label for="element2" id="element2"> text2 </label>
<input type="text" id="element2" name="element2">

但是这段代码没有改变标签的文本 tags.what 有问题吗？

Answer 1

innerText 是原生属性，而不是 jQuery。 jQ 等价物是 text() 方法。更改为：

 jQuery(this).text(options[piced][jQuery(this).attr('id')]);

或（从 jQuery 堆栈中检索本机元素引用）

jQuery(this)[0].innerText = options[piced][jQuery(this).attr('id')];

Answer 2

这是一个普通的 Javascript 方法，它循环遍历标签并将每个标签 (labels[i].textContent) 的 textContent 写为：

options[piced][labels[i].id];

var piced = 'opt';

var options = {
    
    opt: {
        element1_label: "text1",
        element2_label: "text2",
        element3_label: "text3",
    },

    newopt: {
        element1_label: "new text1",
        element2_label: "new text2",
        element3_label: "new text3",
    }

};

var labels = document.getElementsByTagName('label');

for (var i = 0; i < labels.length; i++) {
    labels[i].textContent = options[piced][labels[i].id];
}

<form role="form" >       
<label for="element1" id="element1_label"></label>
<input type="text" id="element1" />

<label for="element2" id="element2_label"></label>
<input type="text" id="element2" name="element2">

<label for="element3" id="element3_label"></label>
<input type="number" id="element3" name="element3">

<button type="submit" >submit</button>

N.B. 我不会说 永远不要使用 innerText - 但是是重要的是要知道 textContent 是标准的 javascript 而 innerText 是非标准的（最初是互联网引入的专有属性资源管理器，后来被 WebKit、Blink 和 Opera 采用。

查看这篇 2015 年的博客 post：

Node.textContent (2015) Mozilla 开发者网络
The poor, misunderstood innerText (2015) kangax

充分掌握textContent和innerText的区别。

跨浏览器解决方案（处理旧版 IE）当然是：

var text = element.textContent || element.innerText;

使用 javascript 在具有唯一 ID 的 html 标签标签中显示数组中的文本

display text from array in html label tags with unque id using javascript

javascript

arrays

innerhtml

innertext