Question

我在带有类选择器组的div中有一个datepicker，我的页面中有3个datepicker，这就是我使用组和不同名称的原因

<div class="pickergroup">
     <input type="text" name="day1" id="day1"/> / 
     <input type="text" name="month1" id="month1"/> / 
     <input type="text" name="year1" id="year1"/>
     <input type="hidden" id="date1" name="date1"/>  
     <div id="datepicker1" name="calendar"></div>
</div>

在我的jquery中，我想检测点击以＆＃34; datepicker＆＃34;开头的id，我想是这样的：

$(document).on('click', '.pickergroup id^="datepicker"', function() {
  $(".pickergroup").find('[id^="datepicker"]').datepicker({
      //my datepicker code
  });
});

但这不正确。

我该怎么办？

Answer 1

问题是你如何在事件处理程序中选择元素。

$(".pickergroup").find('[id^="datepicker"]')

表示“查找所有类别为pickergroup的元素。找到所有孩子，其ID为datepicker。”相反，您希望使用this并修复

中的选择器

.pickergroup id^="datepicker"

到

.pickergroup [id^="datepicker"]

$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
  var $this = $(this); // The div that was clicked
  console.log($this.text());
});

.pickergroup div {
  float: left;
  margin-right: 1em;
  width: 200px;
  height: 200px;
  background: #0F0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
  <div id="datepicker1">A</div>
</div>
<div class="pickergroup">
  <div id="datepicker2">B</div>
</div>
<div class="pickergroup">
  <div id="datepicker3">C</div>
</div>
<div class="pickergroup">
  <div id="can-t-click-me">D</div>
</div>

Answer 2

首先，datepicker元素需要是一个输入。请记住，ID是独一无二的。如果你使用选择器启动，它是好的。但请不要混淆这个。第二，为什么需要单独的领域？您可以使用一个日期选择器，决定要显示的格式，也可以使用您需要/想要的格式从datepicker中解析返回的值。请查看文档。

得到id开头

2 个答案: