2014-11-24 19 views
0

使用Tooltipster,我想用從設置爲js二維數組的英語/泰語詞彙中選擇的單詞填充工具提示。意圖是,作爲一個英文單詞是tooltipped它將被用來訪問和顯示配對的泰語單詞。所有這些都在模態對話框中。下面是HTML:如何讓Tooltipster訪問js數組中的數據

<div id="modal_text">  
    <p id="modal_text01">The <span class="tooltip">boy</span>&#xa0;is&#xa0;<span class="tooltip">walking</span><span>&#xa0;</span><span class="tooltip" >home</span></p> 

這裏是js代碼(數組被設置爲全局變量)

var eng_thai_glossary=[["the","คำนำหน้านามเจาะจง"], ["and","และ"], ... ["dependent","ซึ่งพึ่งพา ผู้อาศัย"]]; 
    jQuery(document).ready(function() { 
     "use strict"; 
     var modalIndex = ""; 
     var ws_dlog = jQuery("div#ws_dialog").dialog({ 
     ... /* dialog setup */ 
     jQuery("span.ws_dialog_icon").on("click",function(evnt) { 
     evnt.stopPropagation(); 
     ws_dlog.dialog("open"); 
     jQuery("#ui-dialog-title-dialog").hide(); 
     jQuery(".ui-dialog-titlebar").removeClass('ui-widget-header'); 
     var elementId = evnt.target.id; 
      modalIndex = elementId.substr(7); 
     var modalId = "modal_text" + modalIndex, 
      modalText = document.getElementById(modalId).innerHTML; 
     var ws_modal_html = '<div class = "ws_dialog_box"><p class = "ws_dialog_text">Here is the word in a sentence</p><p class="ws_dialog_thai">คำในประโยค</p><p class = "ws_dialog_sentence"></p><p><span class="fa fa-volume-up fa_volume_ws"></span></p></div>'; 
     ws_dlog.html(ws_modal_html); 
     jQuery("div.ws_dialog_box p.ws_dialog_sentence").append(modalText); 

     jQuery('span.tooltip').tooltipster({ 
      functionAfter: function(evnt) { 
      var eng_word = jQuery(this).evnt.innerHTML, 
      thai_word = ""; 
      for(var i=0; i<eng_thai_glossary.length; i++) { 
       if(eng_thai_glossary[i][0] === eng_word) { 
       thai_word = eng_thai_glossary[i][1]; 
       return thai_word; 
       } 
      } 
      } 
     }); 
     }); 
     ... /* audio code */ 
    }); 

螢火蟲顯示了類「tooltipstered」被添加到的HTML指示Tooltipster是正在初始化。超出這一點我有點失落。我不確定是否functionAfter是正確的方式去這裏,或任何其他代碼的問題。任何建議將是最受歡迎的

回答

0

好的,這是我解決上述問題的解決方案。我想是很標準的東西。 toLowerCase方法涵蓋了對句子的第一個字符進行大寫的英語慣例。

jQuery('span.tooltip').tooltipster({ 
     functionBefore: function(origin, continueTooltip) { 
     var eng_word = jQuery(origin).text().toLowerCase(), 
     thai_word = "", 
     gloss_length = eng_thai_glossary.length; 
     for(var i=0; i<gloss_length; i++){ 
      if(eng_thai_glossary[i][0] === eng_word) { 
      thai_word = eng_thai_glossary[i][1]; 
      break; 
      } 
     } 
     origin.tooltipster("content", thai_word); 
     continueTooltip(); 
     } 
    });