javascript - vanilla javascript 中的 Each() 问题

Question

每次我尝试在普通 JavaScript 中重现 .each() jQuery 函数时，我都会遇到麻烦。

当我尝试改变这一点时:

$("[data-lng]").each(function(){
   var lng = $(this).data('lng');
   $('#language').text(lng)
});

对此:

var elem = document.querySelectorAll("[data-lng]");
Array.prototype.forEach.call(elem, function(){
    document.getElementById('language').write = elem.dataset.lng
});

控制台返回elem.dataset未定义

另外，我正在处理data内容，所以我什至不确定编写这个document.querySelectorAll("[data-lng]")是否合法>

感谢您的帮助!

PS: 这是我想要转换为普通 JS 的示例: https://jsfiddle.net/x93oLad8/4/

Answer 1

将 jsFiddle 示例替换为普通 JS 相当简单。需要注意的一个“问题”是 IE 不支持 NodeList.prototype.forEach()，因此使用常规的 for 循环。 (参见:https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach)

var dictionary = {
  'greet': {
    'it': 'Ciao',
    'en': 'Hello',
    'fr': 'Salut',
  }
};
var langs = ['it', 'en', 'fr'];
var current_lang_index = 0;
var current_lang = langs[current_lang_index];

window.change_lang = function() {
  current_lang_index = ++current_lang_index % 3;
  current_lang = langs[current_lang_index];
  translate();
}

function translate() {
  /* jQuery:
      $("[data-translate]").each(function(){
      var key = $(this).data('translate');
      $(this).html(dictionary[key][current_lang] || "N/A");
  });*/
  
  /* vanilla */
  var dt = document.querySelectorAll("[data-translate]");
  //iterate over the NodeList:
  for (i = 0; i < dt.length; ++i) {
    var key = dt[i].getAttribute('data-translate');//get the key
    dt[i].innerHTML = (dictionary[key][current_lang] || "N/A");//set the text
  }
  
}

translate();

<div data-translate="greet"></div>
<button onclick="change_lang()">Change Language</button>