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

Posted 2023-05-07

【中文标题】Tooltipster - instance.content() 不会为类的每个实例单独运行

【英文标题】：Tooltipster - instance.content() does not run separately for each instance of the class

【发布时间】：2021-09-13 23:06:07

【问题描述】：

我正在尝试让 tooltipster 显示具有相同类的不同内容。

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

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

Fiddle example

---

我到底是什么意思：

我有一堆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.",
         "legs"  : "Yes, 4.",
         "mammal": "Yes."
      
   


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

我正在尝试以这种方式使用工具提示器：

   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 进入另一个迭代之前重置它的值，但它没有帮助。

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

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

谢谢

【问题讨论】：

请输入可执行代码。 （堆栈中的sn-p）

不知道如何使它在堆栈中“可执行”。制作一个jsfiddle，我会更新。

花了一段时间...需要调试一些东西...这是链接jsfiddle.net/mLthes38

【参考方案1】：

您的问题是，在循环的每个步骤中，您都在检查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 是工作示例。

【讨论】：

您能否详细说明helper.origin 的作用？我浏览了几次文档，但我仍然不知道helper 应该做什么...... :(

helper.origin 是您将鼠标悬停在上面的标签

所以我们没有使用数组 (animalsClass[i])，而是使用了实际悬停的 marked/taged 元素。好的。再次感谢你。如果可以的话，我会再次投票。

那么，使用数组的实际问题是什么？我的意思是，我使用了数组的特定元素 ([i]) 我想使用 / 显示。

不，您不使用数组的特定元素。请注意，[i] 在循环中，您将遍历所有数组