tooltipster - 在多个工具提示上使用一个功能 - origin.helper 或一个或多个工具提示的问题已经存在
Posted
技术标签:
【中文标题】tooltipster - 在多个工具提示上使用一个功能 - origin.helper 或一个或多个工具提示的问题已经存在【英文标题】：tooltipster - using one function on multiple tooltips - problem with origin.helper or one or more tooltips already exists 【发布时间】：2021-10-05 04:31:46 【问题描述】：我正在使用 Mark.js 和 Tooltipster 的组合来显示一些内容。 Mark.js 将一个类（或多个类）附加到特定字符串，而 Tooltipster 使用类名来显示适当的内容。
我有一堆数组。 Mark.js 使用一组数组将类附加到单词。 Tooltipster 使用另一组来显示特定内容。
例如，假设 Mark.js 使用这些数组将类附加到特定单词。
//mark.js will use words inside animalsArr to append a class "animal" to the
//words which match the content of this array.
var animalsArr = [
"/cat.*\b/gm",
"/dog.*\b/gm",
"/whale.*\b/gm"
]
//mark.js will use words inside continentsArr to append a class "continent" to the words
//which match the content of this array.
var continentsArr = [
"/Africa.*\b/gm,",
"/Asia.*\b/gm",
"/Australia.*\b/gm"
]
一些随机文本在 html 中会如下所示：
Some animals which live in <span class="continent">Africa</span> are </br>
<span class="animal">cat</span> and <span class="animal">dog</span>.
从这里开始，我使用工具提示器将工具提示附加到这些类。假设我有以下动物“数组”
var animal =
"prefix":
"fur" : "Fur: ",
"legs" : "Legs : ",
"teeth" : "Teeth : "
,
"suffix" :
"cat" :
"fur" : "Yes.",
"legs" : "Yes.",
"teeth" : "Yes."
,
"dog" :
"fur" : "Yes.",
"legs" : "Yes.",
"teeth" : "Yes."
,
"whale" :
"fur" : "No.",
"legs" : "No.",
"teeth" : "No."
现在，假设我使用光标将鼠标悬停在单词 cat 上。我编写了一个函数（在函数之外还有一些附加代码），它将显示以下内容 -> Fur：是的。腿：是的。牙齿：是的。所有动物都使用相同的功能，并且可以正确显示内容。
我遇到的问题是，我想使用相同的功能来显示各大洲的内容，但我不知道在哪里放置它，所以它可以与不同的工具提示“实例”一起使用（
让我们说这是我的功能
function selectProperStringSet (classname)
//this function includes helper.origin
//it compares the cursor.textContent string with regexes inside animalsArr and selects the appropriate regex to be used from inside animalsArr
...
//additional code which selects object based on the regex from animal "array" (suffix.[animal].fur and displays the string
//ie: Fur: Yes. etc.
如您所见，函数取决于类名。对于动物，我会使用selectProperStringSet(animal); 并添加一些代码来显示prefix.fur + suffix.[animal].fur。问题是，我不想将相同的功能复制粘贴到每个工具提示器“实例”，即 ->（$(.animal).tooltipster(...，$(.continent).tooltipster(...）。
我希望它位于某个地方，我会使用“类名”，以便选择并显示正确的内容。
我尝试过以各种方式解决这个问题。
1.) 在工具提示器被初始化之前放置函数。在这种情况下，问题在于此时 helper.origin 不存在。
helper.origin 未定义
或
光标未定义
（取决于我如何尝试错位/分离代码）
function tooltipsterStuff()
function lookupArray(x)
let cursorArr = cursor.split(" "); //error: cursor is not defined
// etc
$('.animal').tooltipster(
contentAsHTML: true,
animation: 'grow',
updateAnimation: null,
interactive: true,
functionReady: function(instance, helper)
var cursor = helper.origin.textContent;
//etc
lookupArray(animalsArr);
//etc
2.) 在这种情况下，我尝试过嵌套 tooltipster 类（“.tt”（
一个或多个工具提示已附加到下面的元素。忽略。
function tooltipsterStuff()
$('.tt').tooltipster(
contentAsHTML: true,
animation: 'grow',
updateAnimation: null,
interactive: true,
functionReady: function(instance, helper)
var cursor = helper.origin.textContent;
function lookupArray(x)
let cursorArr = cursor.split(" ");
// etc
$('.animal').tooltipster(
//etc
lookupArray(animalsArr);
//etc
);
)
我不知道如何继续。欢迎任何帮助。如果我可以提供任何其他信息，请告诉我。
谢谢。
实际代码：
function tooltipsterStuff()
$('.tooltip').tooltipster();
$('.animal').tooltipster(
contentAsHTML: true,
animation: 'grow',
updateAnimation: null,
interactive: true,
functionReady: function(instance, helper)
//creation of an empty array which will contain (partially) matched words
let lookupArr = [];
//variable which will contain the regex
let cursorRegex;
//cursor gains the textContent of current cursor location
let cursor = helper.origin.textContent;
// index which will be used to create a regex (at the very end)
let longestWordIndex;
/* I WOULD LIKE TO REUSE THIS FUNCTION FOR EACH TOOLTIPSTER INSTANCE */
/* This function compares the hovered on word with the list of regexes which were used by mark.js to mark a word in html. When match is found it is used outside of the function */
function lookupArray(x)
//if the variable cursor contains multiple words they will be split and inserted into an array
let cursorArr = cursor.split(" ");
//creation of an empty array which will contain indexes of (partially) matched words
let lookupArrIndex = [];
lookupOuter:
for (let i = 0; i < x.length; i++)
//variable which will insert the current location (index) of the string into the lookupArrIndex array
let lookupIndex = i;
//variable which will contain a string, which will be created inside the loop and will be added to lookupArray
let stringMatch = "";
//variable which contains regex from animalsArr -> starting / is removed
let currentString = x[i].toString();
currentString = currentString.substring(1);
//array which contains animal words(s)
let currentArr = currentString.split(" ");
//if animal contains the same number of words as the hovered/cursor class
if (currentArr.length == cursorArr.length)
//for cursorArr string.length
lookupMid:
for (let i = 0; i < cursorArr.length; i++)
//variable which contains cursorArr string
let cursorArrStr = cursorArr[i];
//variable which contains animal string
let currentArrStr = currentArr[i];
//logic to figure out if space should be added
let yy = i;
let newWord;
let oldWord;
newWord = i;
//for number of letters inside cursorArrStr
lookupInner:
for (let i = 0; i < cursorArrStr.length; i++)
if (stringMatch.length > 0 && newWord != oldWord)
stringMatch += " ";
if (cursorArrStr[i] == currentArrStr[i])
stringMatch += cursorArrStr[i];
else if (stringMatch.length > 0)
lookupArr.push(stringMatch);
lookupArrIndex.push(lookupIndex);
break lookupInner;
else
break lookupInner;
oldWord = yy;
// lookupArrIndex[i] matches lookupArr[i]. Longest lookupArr is used, with the matching lookupArrIndex
let longestWord;
let arr = [];
for(let i = 0; i < lookupArr.length; i++)
arr.push(lookupArr[i].length); //convert to number of characters inside the string
longestWord = 0;
for (let i = 0; i < arr.length; i++)
if (longestWord < arr[i])
longestWord = arr[i]
longestWordIndex = lookupArrIndex[i];
cursorRegex = new RegExp(x[longestWordIndex]);
let forgeText = animal.prefix.fur;
let match;
/************************** start of class animal ***************************/
lookupArray(animalsArr);
let categoryAnimals = [];
for (let k in animal.suffix)
categoryAnimals.push(k);
catSuffixLoop:
for (let i = 0; i < categoryAnimals.length; i++)
if (cursorRegex.test(categoryAnimals[i]) === true)
match = animal.suffix[categoryAnimals[i]];
break catSuffixLoop;
forgeText += match.fur;
instance.content(
forgeText
)
/************************** end of class animal ***************************/
//end ".animal"
)
【问题讨论】：
【参考方案1】：解决了。
需要将另一个参数放入函数括号中。
function tooltipsterStuff()
function lookupArray(regexList, cursorOrigin)
//etc
【讨论】：
以上是关于tooltipster - 在多个工具提示上使用一个功能 - origin.helper 或一个或多个工具提示的问题已经存在的主要内容，如果未能解决你的问题，请参考以下文章
发现一款好用的jquery插件（tooltipster实用的工具提示插件）
使用 WordPress 时 Tooltipster 工具提示内容为空
Tooltipster - 如果单击其中一个工具提示，如何弹出具有相同内容的工具提示