获取以

Question

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

<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 中，我想检测何时单击以“datepicker”开头的 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 开头的

children

。”相反，您想使用

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 是唯一的。如果你使用starts with选择器，那就没问题了。但请不要对此感到困惑。 其次，为什么需要单独的字段？您可以使用一个日期选择器，决定要显示的格式，还可以以您需要/想要的格式解析日期选择器返回的值。请查看文档。