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

Posted 2023-05-07

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

【英文标题】：display text from array in html label tags with unque id using javascript

【发布时间】：2016-12-05 00:10:57

【问题描述】：

我是 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')];

        );

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

<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">

但是这段代码并没有改变标签标签的文本。有什么问题？

【问题讨论】：

ID 在整个页面中应该是唯一的

哎呀！我换了ID还是不行。

【参考方案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')];

【讨论】：

请不要使用$(this).attr('id')或$(this).prop('id')；只需使用this.id 就更便宜、更容易。

您可能应该将此问题提交给 OP。我解决了他的主要问题；您引用的部分我刚刚复制过来。

当然，但是评论是在您的答案上，因为您将那部分复制到您的工作代码中，并且没有解释为什么使用 jQuery 检索十字架是不必要且不必要的糟糕- 节点的浏览器属性。另外，我认为，OP 也会收到 cmets 的通知，以告知您的答案，而且当 OP 审核答案时，他/她（可能）也会看到评论。

【参考方案2】：

这是一个普通的 Javascript 方法，它遍历标签并将每个标签的 textContent (labels[i].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>

---

注意我不会说永远不要使用innerText - 但知道@987654329 很重要 @ 是标准的 javascript 而innerText 是非标准的（最初是 Internet Explorer 引入的专有属性，后来被 WebKit、Blink 和 Opera 采用）。

请参阅这篇 2015 年的博文：

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

全面掌握textContent和innerText的区别。

---

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

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

【讨论】：

我不知道为什么，但在我的代码 var labels = document.getElementsByTagName('label'); 中返回 null！我在 wordpress 中使用它。

我也不知道为什么。在 javascript 中，document.getElementsByTagName('ELEMENT'); 将始终返回一个包含所有这些元素的 NodeList。