JQuery，唯一id
JQuery，唯一id
提问于 2020-01-10 21:04:30
我有一个带有两个日期输入字段的表单。
我想使用DatePicker。为了获得每个字段的日历弹出窗口，我需要使用唯一的id。
如何在创建唯一id的同时引用一(1)个"DatePicker“JQuery函数？
我试过了：
$( "#datepicker" ).datepicker();使用
id="1datepicker"
id="2datepicker"和
$( "#.datepicker" ).datepicker();使用
id="1.datepicker"
id="2.datepicker"下面是代码
$( function() {
$( "#datepicker" ).datepicker();
$( "#.datepicker" ).datepicker();
}
);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Date: <input type="text" id="datepicker"></p>
<p>Date: <input type="text" id="1datepicker"></p>
<p>Date: <input type="text" id="2datepicker"></p>
<p>Date: <input type="text" id="1.datepicker"></p>
<p>Date: <input type="text" id="2.datepicker"></p>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-01-10 21:10:13
您可以使用一个类来选择Jquery中的元素，而不是使用in。每个datepicker仍然有一个惟一的Ids，但是jquery会同时选择这两个Ids。
此外，您的ids不能以数字开头。see here
$( function() {
$( ".picker" ).datepicker();
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker1" class="picker"></p>
<p>Date: <input type="text" id="datepicker2" class="picker"></p>
</body>
</html>
Stack Overflow用户
发布于 2020-01-10 21:14:01
当我们需要对一组DOM元素执行相同的活动时，最佳实践是使用class。当我们想要设置/获取值时，我们仍然可以拥有日期选择器的Ids。
$(document).ready( function() { //This will fire only after DOM is ready
$( ".datepicker" ).datepicker();
}
);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" class="datepicker" id="datepicker"></p>
<p>Date: <input type="text" class="datepicker" id="datepicker1"></p>
<p>Date: <input type="text" class="datepicker" id="datepicker2"></p>
<p>Date: <input type="text" class="datepicker" id="datepicker3"></p>
<p>Date: <input type="text" class="datepicker" id="datepicker4"></p>
<p>Date: <input type="text" class="datepicker" id="datepicker5"></p>
</body>
</html>
Stack Overflow用户
发布于 2020-01-10 21:17:28
只需使用一个特殊的css类而不是id。这样，所有的datepicker输入字段都可以(而且必须！)具有不同的ids，您的脚本可以通过类名来调用它们。
请记住，in和类不允许以数字开头！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59682283
复制相关文章
相似问题
腾讯云开发者
