问题描述
我结合使用 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.","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,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,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"
})
}
解决方法
解决了。
需要将另一个参数放入函数括号中。
function tooltipsterStuff() {
function lookupArray(regexList,cursorOrigin){
//etc