獲得ID開始

Question

我有帶班pickergroup一個div一個日期選擇器，我有我的第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所有元素。找到所有他們孩子具有開始datepicker一個ID的。」相反，你要使用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返回的值。請看一下文檔。