工具提示 - instance.content() 不会 运行 分别针对 class 的每个实例
Tooltipster - instance.content() does not run separately for each instance of the class
我正在尝试让工具提示器显示具有相同内容的不同内容 class。
我正在使用 .content( ... )
方法,希望它能改变工具提示的值。 .content( ... )
的值确实发生了变化,但每个工具提示的所述值与 class.
的值相同
我希望 tooltipster 在每次找到 class 的实例时循环并更新其内容。
我到底是什么意思:
我有一堆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
进入另一次迭代之前重置其值,但没有帮助。
如果有人知道如何解决这个问题,我将不胜感激。
如果我可以提供任何其他信息或说明,请告诉我。
谢谢
您的问题是在循环的每一步中,您都在检查 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 是工作样本。
我正在尝试让工具提示器显示具有相同内容的不同内容 class。
我正在使用 .content( ... )
方法,希望它能改变工具提示的值。 .content( ... )
的值确实发生了变化,但每个工具提示的所述值与 class.
我希望 tooltipster 在每次找到 class 的实例时循环并更新其内容。
我到底是什么意思:
我有一堆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
进入另一次迭代之前重置其值,但没有帮助。
如果有人知道如何解决这个问题,我将不胜感激。
如果我可以提供任何其他信息或说明,请告诉我。
谢谢
您的问题是在循环的每一步中,您都在检查 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 是工作样本。