javascript - 如何在新元素中显示文本翻译

Question

我想制作这样工作的脚本:我有三个单词的列表，当我将鼠标移到它们上面时，我需要在新元素中获取翻译后的文本。

我创建了一个列表:

• 汽车
• 飞机
• 狮子

而这个函数...

  <script>
  $(".word_split").lettering('car');
  $('.word_split').mouseover(function(event) {
  }
  </script>

再说一遍，如何制作脚本，在我将鼠标悬停在其中一些元素上后，在新元素中显示翻译后的文本。

Answer 1

我会这样做:

对于像这样的简单示例，我会将翻译存储为 HTML 中的属性。

然后使用 JQuery 来:

1. 首先将原始单词存储在另一个属性中
2. 在两个属性之间交换 - 原始属性和翻译属性。

$(document).ready(function(){
  
  $('.word_split').each(function(){
    var thisword = $(this);
    
    thisword.attr('data-original', thisword.text());
    
    thisword.mouseover(function(e){
      thisword.text(thisword.attr('data-translation'));
    })
    .mouseout(function(e){
      thisword.text(thisword.attr('data-original'));
    });
    
  });
    

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="word_split" data-translation="Auto">Car</div>
<div class="word_split" data-translation="Letoun">Aeroplane</div>
<div class="word_split" data-translation="Lev">Lion</div>