将带有每个的 JQuery 函数转换为 vanilla JS答案

【问题标题】：Convert JQuery function w/each to vanilla JS将带有每个的 JQuery 函数转换为 vanilla JS
【发布时间】：2020-07-21 21:39:50
【问题描述】：

我需要一些帮助。我正在使用带有 JQuery 和 JSON 的多语言静态站点，但我想使用带有简单 JS 的它。大部分代码已完成，但我无法成功解析 JS 的注释部分（使用 JQuery 运行良好）。

var language, translate, jsData;

// Here is the questioned part in JQuery
translate = function(jsdata) {
  $('[block]').each(function(index) {
    var strTr;
    strTr = jsdata[$(this).attr('block')][$(this).attr('txt')];
    $(this).html(strTr);
  });
};


document.querySelector("a#hu").addEventListener("click", (e) => {
  // getJson('hu');
  jsData = {
    "1.md": {
      "title": "teszt 1",
      "body": "Szia Világ!"
    },
    "2.md": {
      "title": "teszt 2",
      "body": "Szia Világ megint!"
    }
  }
  translate()

});


document.querySelector("a#en").addEventListener("click", (e) => {
  // getJson('hu');
  jsData = {
    "1.md": {
      "title": "test 1",
      "body": "Hello Word!"
    },
    "2.md": {
      "title": "test 2",
      "body": "Hello Word again!"
    }
  }
  translate()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a hrf="#" id="hu">HU</a>
<a hrf="#" id="en">EN</a>
<p block="1.md" txt="title"></p>
<p block="1.md" txt="body"></p>

【问题讨论】：

请发表您所做的尝试。
另请注意，block 和 txt 不是任何 HTML 元素中的标准属性。如果您想将自定义元数据添加到 DOM，我建议您改用 data 属性
同意上述观点，但会更进一步，只坚持一个ID（如果只有1个元素）/类（多个元素）并使用document.getElementBy，然后只使用标准forEach？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
你面临什么样的“问题”？
我在 sn-p 中更新了您的代码。您的 AJAX 可能有效。请让 sn-p 运行

标签： javascript jquery each

【解决方案1】：

请阅读 cmets。

[...document.querySelectorAll("[block]")]
   .forEach(block => block.innerHTML = jsData[block.getAttribute("block")][block.getAttribute("txt")]);

let language, jsData;

// Here is the questioned part in JQuery
const translate = () => {
  [...document.querySelectorAll("[data-block]")].forEach(
    block =>
    block.innerHTML = jsData[block.getAttribute("data-block")][block.getAttribute("data-txt")]
  );
};


document.querySelector("a#hu").addEventListener("click", (e) => {
  // getJson('hu');
  jsData = {
    "1.md": {
      "title": "teszt 1",
      "body": "Szia Világ!"
    },
    "2.md": {
      "title": "teszt 2",
      "body": "Szia Világ megint!"
    }
  }
  translate()

});


document.querySelector("a#en").addEventListener("click", (e) => {
  // getJson('hu');
  jsData = {
    "1.md": {
      "title": "test 1",
      "body": "Hello Word!"
    },
    "2.md": {
      "title": "test 2",
      "body": "Hello Word again!"
    }
  }
  translate()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a hrf="#" id="hu">HU</a>
<a hrf="#" id="en">EN</a>
<p data-block="1.md" data-txt="title"></p>
<p data-block="1.md" data-txt="body"></p>
<p data-block="2.md" data-txt="title"></p>
<p data-block="2.md" data-txt="body"></p>

【讨论】：

对不起，我刷新了我的问题。
感谢您的帮助！