0

嘿，我是使用 fetch 和 JSON 的新手。

我正在使用 Lettering.js 将单词分成 span 元素以使它们可悬停并获取 span 元素的 innerHTML。

我有一个获取翻译、同义词和单词类型的获取函数。然后使用 .innerHTML 将这些应用到指定的 div。

我的问题是，当多个 span 元素快速连续悬停时，div 将堆叠所有结果而不重置，并且即使在 mouseout 期间也会继续，直到再次将鼠标悬停在 span 元素上。

我尝试在 mouseover 事件侦听器的开头添加一个重置到 div，并在 mouseout 事件侦听器上添加一个重置。

function getText() {
  document.getElementById('title').innerHTML = 'Alice in wonderland'
  fetch('aliceinwonderland.txt')
  .then(function(response){
    return response.text();
  })
  .then(function(myBook) {
    let text = myBook;
    document.getElementById('hello').innerHTML = text;
  })
  .then(function(){
    $(".word_split").lettering('words');
    const word = document.getElementsByTagName('span');
    for (let i = 0; i < word.length; i++) {
      word[i].addEventListener("mouseover", function(e) {
        document.querySelector('#translationOutput').innerHTML = " "
        document.getElementById('dictionaryOutput').innerHTML = " "
        document.getElementById('pos').innerHTML = " "
        e.target.style.fontWeight = 600;
        let api_key = 'trnsl.1.1.20190803T205532Z.8647ed72c2fd9935.88fa851b8a0d3b85ed70dc1ceb33a675c477242b';
        fetch('https://translate.yandex.net/api/v1.5/tr.json/translate?key=' + api_key + '&text=' + e.target.innerHTML + '&lang=fr-en&format=html')
        .then(function(response) {
          return response.json();
        })
        .then(res => {
          for (var i = 0; i < res.text.length; i++) {
            document.querySelector('#translationOutput').innerHTML = res.text[i].replace(/[^a-zA-Z ]/g, "")
          }
        });
        let api_dictionary = 'dict.1.1.20190805T202709Z.335da31d890b6512.d631a95d13606b8a5c82e663ad3f7f2760869ba1';
        fetch('https://dictionary.yandex.net/api/v1/dicservice.json/lookup?key='+ api_dictionary + '&lang=fr-en&text=' + e.target.innerHTML )
        .then(function(response) {
          return response.json();
        })
        .then(res => {
          if (res.def[0]) {
            for (let i = 0; i < res.def[0].tr.length; i++) {
              document.getElementById('dictionaryOutput').innerHTML += '<p>' + res.def[0].tr[i].text.replace(/[^a-zA-Zá]/g, "") +  ' <br></p>'
              document.getElementById('pos').innerHTML += '<p>' + res.def[0].tr[i].pos.replace(/[^a-zA-Z ]/g, "") + ' <br></p>'
              console.log(res);
            }
          } else {
            console.log('No entries')
          }
        })
      })
      word[i].addEventListener("mouseout", function(e) {
        e.target.style.fontWeight = "";
        document.querySelector('#translationOutput').innerHTML = " "
        document.getElementById('dictionaryOutput').innerHTML = " "
        document.getElementById('pos').innerHTML = " "
      });
    };
  });
};

没有错误消息，并且 JSON 数据可以毫无问题地通过。慢慢读单词时效果很好。

4

1 回答 1

0

尝试改变这一点：

word[i].addEventListener("mouseover", function(e) {..});

您可以将此 if 语句包含在 for 循环中，并将我们更改的添加事件侦听器放入。

if(word[i].className() != 'bound'){
  word[i].addClass('bound').on('mouseover', function(e) {..});
}
于 2019-08-09T02:03:36.043 回答