Tooltipster - instance.content() 不会为类的每个实例单独运行

问题描述

我试图让 tooltipster 用同一个类显示不同的内容。

我正在使用 .content( ... ) 方法，希望它能改变工具提示的值。 .content( ... ) 的值确实发生了变化，但对于具有该类的每个工具提示来说，所述值是相同的。

我希望工具提示器在每次找到类的实例时循环并更新其内容。

我到底是什么意思：

我有一堆 json/arrays 并且它们被分组。例如：

/* animal "json/array" */
var animals = {
   "category": {
      "furry"  : "Are they furry: ","legs"   : "How many legs do they have: ","mammal" ; "Is it a mammal: "
   },{
   "animals": {
      "dog" : {
         "furry" : "Yes.","legs"  : "Yes,4.","mammal": "Yes."
      },"cat" : {
         "furry" : "Extremely.","mammal": "Yes."
      }
   }
}

/* continents "json/array" */
var continents = {
   "category" : {
      "size" : "Size: ","pop"  : "Population: ","tz"   : "Timezones: "
   },{
   "continents" : {
      "africa" : {
         "size" : "...","pop"  : "...","tz"   : "..."
      },"asia" : {
         "size" : "...","tz"   : "..."
      }
   }
}

我正在尝试以这种方式使用 tooltipster：

   var animalsClass;
   function getMarkedAnimals(){
        animalsClass = document.getElementsByClassName("animals");
   }

function TooltipsterStuff(){
   $('.animal').tooltipster({
      functionReady: function(instance,helper) {
         for(let i = 0; i < animal.animals.length; i++){

            let fix;
            let pre0 = animal.animals.category.furry;
            let pre1 = animal.animals.category.legs;
            let pre2 = animal.animals.category.mammal;

            if(animal.animals.hasOwnProperty(animalsClass[i].textContent)){
               fix = animal.animals[i];
               instance.content(
                  pre0 + fix.furry +
                  pre1 + fix.legs +
                  pre2 + fix.mammal
               )
            }
         }
      }
   })     
}

function TooltipTriggerFunction (){
   getMarkedAnimals();
   TooltipsterStuff();
}

假设这是我的 HTML

<div>
   Some text about a <span class="animal">cat</span> and a <span class="animal">dog</span>. 
<div>

问题是，猫和狗都有相同的工具提示。始终使用最后一个工具提示。

我尝试移动 instance.content(...)，但没有帮助。我曾尝试在 var fix 进入另一次迭代之前重置它的值，但没有帮助。

如果有人知道如何解决这个问题，我将不胜感激。

如果我可以提供任何其他信息或说明，请告诉我。

谢谢

解决方法

您的问题是，在循环的每一步，您都在检查 animalsClass[i].textContent，但您必须检查鼠标悬停在其上的那些。我的意思是helper.origin.textContent。

所以你需要这样做：

 function TooltipsterStuff() {
     $('.animals').tooltipster({
         contentAsHTML: true,functionReady: function (instance,helper) {
             debugger
             for (let i = 0; i < animalsClass.length; i++) {

                 let pre0 = animal.category.furry;
                 let pre1 = animal.category.legs;
                 let pre2 = animal.category.mammal;
                 let fix;
                 let enter = "</br>";

                 if (animal.animals.hasOwnProperty(helper.origin.textContent)) {

                     fix = animal.animals[helper.origin.textContent];
                     console.log(fix);
                     instance.content(
                         pre0 + fix.furry + enter +
                         pre1 + fix.legs + enter +
                         pre2 + fix.mammal
                     )
                 }
             }
         }
     })
 }

Here 是工作样本。

javascript tooltipster