Jquery var迭代后DIV显示不起作用答案

【问题标题】：DIV display not working after Jquery var iterationJquery var迭代后DIV显示不起作用
【发布时间】：2020-12-07 09:32:49
【问题描述】：

我想根据数组中的项目显示我的 div。因此，当页面加载时，会根据数组的内容对数组进行迭代，选择一个 div。

下面是我的代码，它显示两个 div，但不显示 div，而是在页面上闪烁几秒钟。

var names = ['Volcano'];

$(document).ready(function() {
  for (i = 0; i < names.length; i++) {
    $(".all").hide("fast");
    if (names[0].val().toLocaleLowerCase() == "animals") {
      $("#animal").show("fast");
    } else if (names[0].val().toLocaleLowerCase() == "volcano") {
      $("#volcano").show("fast");
    }
  }
});

#animal {
  display: none;
}

#volcano {
  display: none;
}

#incorrect {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all" id="animal">That's Correct they are animals!</div>
<div class="all" id="volcano">It's a Volcano</div>

【问题讨论】：

#names 元素在哪里？
为什么要隐藏每一轮循环中的所有元素？
'names' 位于 var
@Andreas，我虽然一开始可以隐藏所有然后只在迭代后显示
@Andreas 谢谢，我们必须同时编辑 - 我修复了它。 #names 参考仍然缺失。

标签： html jquery arrays

【解决方案1】：

删除 val() 函数，它就可以工作了。

var names = ['Volcano'];

$(document).ready(function() {
  for (i = 0; i < names.length; i++) {
    $(".all").hide("fast");
    if (names[0].toLocaleLowerCase() == "animals") {
      $("#animal").show("fast");
    } else if (names[0].toLocaleLowerCase() == "volcano") {
      $("#volcano").show("fast");
    }
  }
});

#animal {
  display: none;
}

#volcano {
  display: none;
}

#incorrect {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all" id="animal">That's Correct they are animals!</div>
<div class="all" id="volcano">It's a Volcano</div>

names 是一个数组，这可能很有用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

【讨论】：