Question

每当我尝试在vanilla 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 is not defined

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

感谢您的帮助！

PS：以下是我要转换为vanilla JS的示例： https://jsfiddle.net/x93oLad8/4/

Answer 1

首先，不要使用：

Array.prototype.forEach.call(elem, function()

你可以使用

elem.forEach(function()

其次，回调函数可以接受参数（其中3个是特定的）： el - current elem（你正在寻找的“这个”？）） index - 数组中当前elem的索引 list - 循环的节点列表

用法：

elem.forEach(function(el, index, list){
    console.log(el); //logs current element
});

了解详情：https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

@Edit：由于关于第一部分的评论中有一个很大的讨论，我觉得有必要链接一个关于覆盖JS中的默认方法的线程：[].slice or Array.prototype.slice（又名为什么elem.forEach可能不起作用，只是如果：））

Answer 2

将你的jsFiddle示例换成vanilla 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>

vanilla javascript

2 个答案: