时间戳

首页 > 解决方案 > for 循环不显示正确的内容

javascript - for 循环不显示正确的内容

问题描述

使用 for 循环时显示正确内容时出现问题。大声呼喊@Alireza Ahmadi 解决了我的问题。

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

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

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

小提琴示例

假设我有以下 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);

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

Oni = 1 animalsClass[1]的内容是“whale”，所以工具提示应该更改为：“No.”、“No.”。是的。”。

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

谢谢你。

编辑：

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

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

编辑2：

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

标签： javascriptfor-loop

解决方案

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

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

animalsClasshasdog和whalevalue 并且您在循环中检查它们并且它们都满足您的条件if(animal.animals.hasOwnProperty(animalsClass[i].textContent))。

推荐阅读