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

时间:2019-02-02 16:44:57

标签: javascript html

我想使脚本,将工作是这样的:我有三个词列表,当我将鼠标移动到他们,我需要得到新的元素翻译文本

我创建了一个列表:

      
  • 汽车
  •   
  • 飞行
  •   
  • 狮子
  •   
还有这个功能...

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

如此反复,如何使脚本会告诉我在他们中的一些翻译成新元素的文字我的鼠标了。

1 个答案:

答案 0 :(得分:2)

我会这样:

我会将翻译内容存储为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>