單擊后如何從父元素獲取[數據值]

Question

我的代碼結構如下所示：

<div id="calendar" data-calendar="0">
    <div class="box">
        <div class="head">
            <div class="nav_prev" data-calendar-nav="prev">
            <div class="nav_prev" data-calendar-nav="prev">
        </div>
    </div>
</div>

我真的不知道該怎么點擊后.nav_prev或.nav_next獲得data-calendar值（在本例中為0）從#calendar 。 我知道我應該使用.parent()但是我不知道該怎么做。

現在，我只有那個JS代碼：

$(document).on("click","#calendar .head .nav_prev, #calendar .head .nav_next",function(){
    if( $(this).attr('data-calendar-nav') == 'prev')
    {
        console.log('prev');
    }
    if( $(this).attr('data-calendar-nav') == 'next')
    {
        console.log('next');
    }
})

Answer 1

使用closest()來獲取父對象，並使用data()來獲取數據屬性：

$(document).on("click","#calendar .head .nav_prev, #calendar .head .nav_next",function(){
    if($(this).data('calendar-nav') == 'prev') {
        console.log('prev');
        alert($(this).closest('#calendar').data('calendar'));
    }
    if($(this).data('calendar-nav') == 'next') {
        console.log('next');
        alert($(this).closest('#calendar').data('calendar'));    
    }
});