Конвертировать JQuery функция с каждым ваниль JS - PullRequest
Новая
       16

Конвертировать JQuery функция с каждым ваниль JS

0 голосов
/ 09 апреля 2020

Мне нужна помощь. Я использую многоязычный сайт stati c с JQuery и JSON, но я хотел бы использовать его с JS. Большая часть кода завершена, но я не могу разрешить закомментированную часть JS успешно (с / 1013 * она работает хорошо). 

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>

1 Ответ

1 голос
/ 09 апреля 2020

Пожалуйста, прочитайте комментарии. 

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