如何在不知道 javascript 中的标签 ID 的情况下通过 javascript 函数设置标签文本答案

【问题标题】：How can i set a label text by a javascript function without knowing the label ID in javascript如何在不知道 javascript 中的标签 ID 的情况下通过 javascript 函数设置标签文本
【发布时间】：2016-10-21 12:21:06
【问题描述】：

我需要设置带有各种语言翻译的 HTML 标签的文本。当我知道标签的 ID 时，我知道该怎么做，但我想制作一个不需要 ID 的通用 Javascript 函数。按照这个顺序，我需要这样的东西：

HTML：

<label> <script> translating_function("hello"); </script> </label>

JAVASCRIPT：

function translating_function(string) {
  //finding the translation (for example translated_text)
  returning translated_text
}

translating_function 函数的返回应该设置为标签的文本。有没有人知道如何做到这一点。非常感谢你。

【问题讨论】：

你必须有一些东西来定位、定位、索引、父、子等，或者这是文档中唯一的标签？
你知道标签对象的父对象吗？那么你可以尝试通过父子关系找到它。
@adeneo 因为这个函数也是用来翻译javascript警报消息的，它不能有任何目标或名称。
@JayLane 如果我也想使用此功能来翻译 javascript 警报，是否可以使用父/子关系？
是的，您可以，但我需要查看您的 DOM 布局的其余部分以提供帮助

标签： javascript jquery html

【解决方案1】：

var voc = [
            {
              "AR":"أهلا",
              "ES":"¡Hola",
              "EN":"hello"
            },
            {
              "AR":"مرحبا",
              "ES":"bienvenida",
              "EN":"welcome"
            },
            {
              "AR":"و",
              "ES":"y",
              "EN":"and"
            },
            {
              "AR":"في اللغة العربية",
              "ES":"a España",
              "EN":"to English"
            }
          ];


function translate(ele,lng){
 for(var i=0;i<voc.length;i++){
  for(var k in voc[i]){
   if(voc[i][k] == ele.innerText.trim()){
    ele.innerText = voc[i][lng];
    break;
   }
  }
 }
}
function translateTo(lng){
var trc = document.getElementsByClassName("translatable");
for(var i=0;i<trc.length;i++){
translate(trc[i],lng);
}
}
//add this function to any event button.click,select.change or on load
//translateTo("AR");

<p>
<span class='translatable'>hello</span> 
<span class='translatable'>and</span> 
<span class='translatable'>welcome</span> 
<span class='translatable'>to English</span> :)
</p>
<select onchange='translateTo(this.value)'>
<option value='EN'>English</option>
<option value='AR'>Arabic</option>
<option value='ES'>Espain</option>
</select>

【讨论】：

【解决方案2】：

jsfriddle

<script>
function translating_function(str) {
  return 'translating: ' + str;
}
</script>
<label> <script> document.write(translating_function("hello")); </script> </label>

【讨论】：