时间戳

首页 > 解决方案 > JQuery 函数中的 For 循环

javascript - JQuery 函数中的 For 循环

问题描述

我正在尝试在 JSP 文件中使用 JQuery 创建一堆选项卡。for 循环似乎不会多次执行。我期待看到创建的两个选项卡 + 5 个选项卡。我只看到“登录”、“注册”和“新标签 0”标签。我究竟做错了什么？我对此完全陌生。在此先感谢您的帮助

下面是整个 index.jsp 文件，for 循环位于文件底部的脚本标签内

$((function() {
  var tabs = $("#container").tabs();
  var maxVal = 5;
  var i = 0;
  for (i = 0; i < 5; i++) {
    var ul = tabs.find("ul");
    $("<li><a href='#newtab'>New Tab " + i + " </a></li>").appendTo(ul);
    $("<div id='newtab'>Name :<input type='text'></input></div>").appendTo(tabs);
    tabs.tabs("refresh");
    tabs.tabs('select', 1);
  };
}))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="container">
  <div id="tabs">
    <ul>
      <li><a href="#login">Login</a></li>
      <li><a href="#register">Register</a></li>
    </ul>
    <div id="login">
      <label for="email">Email:</label> <br /> <input type="text" name="email" id="email" /> <br /> <label for="password">Password:</label>
      <br /> <input type="password" name="password" id="password" /> <br />
      <br /> <input type="submit" value="Login">
    </div>
    <div id="register">
      <label for="name">Name:</label><br /> <input type="text" name="name" id="name" /> <br /> <label for="email">Email:</label><br />
      <input type="text" name="email" id="email" /> <br /> <label for="password">Password:</label><br /> <input type="password" name="password" id="password" /> <br /> <label for="address">Address:</label><br />
      <input type="text" name="address" id="address" /> <br /> <br /> <input type="submit" value="Register">
    </div>
  </div>
</div>

标签： javascriptjqueryjquery-ui

解决方案

您可以通过更改行来解决此特定问题：

 tabs.tabs('select', 1);

成为

tabs.tabs("option", "selected", 1);

但是，您可能还需要考虑其他一些问题。您在循环中执行的工作超过了必要的工作量，我不清楚您打算在哪里添加每个选项卡，以及您是否真的在需要的地方添加它们。

最后，请研究如何在您使用的任何浏览器中使用 javascript 控制台。运行您的代码会产生一个错误：Uncaught Error: no such method 'select' for tabs widget instance这肯定会帮助您追踪问题。

推荐阅读