javascript - 获取 id 开头

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 开头的所有子元素。”相反，您想使用 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>