单击

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获取#calendar值（在此示例中为0）。我知道我应该使用.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'));    
    }
});