for 循环不显示正确的内容

Question

我在使用 for 循环时无法显示正确的内容。大声疾呼@Alireza Ahmadi 解决了我的问题。

我仍然想了解我的逻辑存在缺陷的地方。如果有人能指出我在哪里犯了错误，我将不胜感激。

---

我想使用 Tooltipster 插件在工具提示中显示不同的内容。 Tooltipster 使用类来显示/更改工具提示。

我遇到的问题（AA 解决了）是每个工具提示都有相同的内容，即使我使用 for 循环遍历类的所有元素 (animal)。

fiddle example

假设我有以下 HTML：

<div class="textArea">
   Vastly different animals such as <span class="animal">whale</span> 
   and <span class="animal">dog</span> do have some things in common.
</div>
<div id="runTT">Run Tooltipster</div>

Tooltipster 将查找一个类（在本例中为 animal）并更改其内容。

我有一个 json/数组：

        var animal = {
           "category": {
              "furry"  : "Are they furry: ",
              "legs"   : "Does it have legs: ",
              "mammal" : "Is it a mammal: "
           },"animals":{
                      "dog" : {
                         "furry" : "Yes.",
                         "legs"  : "Yes, 4.",
                         "mammal": "Yes."
                      },
                      "whale" : {
                         "furry" : "No.",
                         "legs"  : "None.",
                         "mammal": "Yes."
                      }
                }
        }

这是 javascript + tooltipster 代码：

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

        function TooltipsterStuff(){
        $('.animal').tooltipster({
          contentAsHTML: true,
          functionReady: function(instance, helper) {
             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(animalsClass[i].textContent)){
                   
                    fix = animal.animals[animalsClass[i].textContent];

                    instance.content(
                    pre0 + fix.furry + enter +
                    pre1 + fix.legs + enter +
                    pre2 + fix.mammal
                   )
                }
             }
          }
        })
        }

        function doStuff(){
            getMarkedAnimals();
            TooltipsterStuff();
        }
    
        document.getElementById("runTT").addEventListener("click", doStuff);

所以，按照我的（有缺陷的）逻辑，循环运行了。在let i = 0 animalsClass[0] 的内容为“dog”，因此工具提示应更改为“Yes.”、“Yes, 4”。是的。

在i = 1 animalsClass[1] 的内容为“鲸鱼”，因此工具提示应更改为：“No.”、“No.”和“是的”。

它显然不起作用，所以请指出我犯的错误。

谢谢。

---

编辑：

所以问题是fix 被覆盖，因为条件hasOwnProperty 多次为真。此外，content 只运行一次，因此始终只使用最新的值。

如果content 将被使用/运行多次，那么for 循环将起作用，但由于content 只运行一次，它只使用所有工具提示上的最新值。

---

编辑 2：

所以，问题在于我使用一个类 (animal) 来显示具有不同内容的多个工具提示。 for 循环不起作用，因为该值没有保存在任何地方，每次我们将鼠标悬停在类 animal 上时它都会查找它。要在使用同一个类时显示不同的工具提示，我们需要指出我们悬停在哪个 tag 上，这是通过 helper.origin 完成的。

Answer 1

发生这种情况是因为您处于循环中。是的animalsClass[0] 有dog 的内容但是你在循环然后你去animalsClass[1]！

请注意，您需要检查您在鼠标上放置的标签，即helper.origin。

animalsClass 具有 dog 和 whale 值，并且您在循环中检查它们并且它们都满足您的条件 if(animal.animals.hasOwnProperty(animalsClass[i].textContent))。