Anzeigetext von Array in html-Label-Tags mit unque id mit Javascript

Question

i bin neu in Javascript, Ich habe folgende HTML-Code:

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

und ich möchte einen Text anzuzeigen, aus options Array von Javascript-Code folgenden:

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

     }); 

ich mag jeden HTML-Label Wert solchen Index von piced Array anzuzeigen. zum Beispiel:

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

aber dieser Code nicht den Text des Labels tags.what ändern ist Problem?

Answer 1

innerText ist eine native Eigenschaft, keine jQuery eine. Das jQ-Äquivalent ist die text()-Methode. Ändern, um entweder:

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

oder (Abrufen des nativen Element-Referenz aus der jQuery Stack)

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

Answer 2

Hier ist ein Vanille Javascript Ansatz, der die Etiketten Schleifen durch und schreibt das textContent jedes Etiketts (labels[i].textContent) als:

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. Ich würde nicht so weit gehen, zu sagen, nieinnerText verwenden - aber es ist wichtig zu wissen, dass textContent Standard JavaScript ist während innerText ist Nicht-Standard (ursprünglich ein geschütztes Eigentum eingeführt von Internet Explorer, die später von WebKit angenommen , Blinzeln und Opera).

Sehen Sie diese 2015 Blog-Post:

• Node.textContent (2015) von Mozilla Developer Network
• The poor, misunderstood innerText (2015) von kangax

vollem Umfang die Unterschiede zwischen textContent zu erfassen und innerText.

---

Die Cross-Browser-Lösung (Legacy-Versionen von Internet Explorer umgehen) ist natürlich:

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