Цикл For в функции JQuery - PullRequest
Новая
       9

Цикл For в функции JQuery

0 голосов
/ 12 марта 2019

Я пытаюсь создать несколько вкладок с помощью JQuery в файле JSP.Цикл 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>

Ответы [ 3 ]

1 голос
/ 13 марта 2019

Вы можете решить эту конкретную проблему, изменив строку: 

 tabs.tabs('select', 1);

на 

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

Однако здесь есть несколько других проблем, которые вы можете рассмотреть.Вы выполняете в цикле больше работы, чем необходимо, и мне неясно, где вы хотели добавить каждую вкладку и добавляете ли вы ее там, где вам нужно.

Наконец, посмотрите, какиспользовать консоль javascript в любом браузере, который вы используете.Запуск вашего кода приводит к ошибке: Uncaught Error: no such method 'select' for tabs widget instance, которая определенно помогла бы вам отследить проблему.

0 голосов
/ 13 марта 2019

Спасибо всем большое!Ваши ответы помогли мне отладить и исправить код.Ниже приведен код a - это то, чего я ожидал! 

    `<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Empty Tabs Example</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-ui.js"></script>

</head>
<body>
		<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>
</body>

<script>
$((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_" + i + ">New Tab " + i + " </a></li>" ).appendTo(ul);
            $( "<div id=newtab_" + i + ">Name :<input type='text'></input></div>" ).appendTo(tabs);
            tabs.tabs("refresh");
            tabs.tabs("option", "active", 0);
 		}
    }));
</script>

</html>`
0 голосов
/ 13 марта 2019

Этого достаточно, чтобы проиллюстрировать проблему.Я надеюсь, что jQuery существует не только для получения функции $. 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
      <div id="tabs">
				<ul>
					<li><a href="#login">Login</a></li>
					<li><a href="#register">Register</a></li>
				</ul>
			</div>
</body>
</html>
                
<script>
(function() {
            for(var i=0; i<5; i++) {
                $( "<li><a href='#newtab"+i+"'>New Tab " + i + " </a></li>" ).appendTo("ul");
            }            
})();     
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...