javascript - 在父元素中使用jQuery获取数据属性的值

我有以下HTML代码，我想从onclick的.spot-info获得data-test的值。

    <div class="spot" id="spot-1" data-test="12345">
        <div class="spot-main">
          <span>Test</span>
          <a href="#" class="spot-info">view</a>
        </div>
    </div>

    <div class="spot" id="spot-2" data-test="67891">
        <div class="spot-main">
          <span>Test</span>
          <a href="#" class="spot-info">view</a>
        </div>
    </div>

请在下面查看我的js尝试:

    $('.spot-info').click(function ( e ) {
        e.preventDefault();
        var test = $(this).parent().parent().data('data-test');
        console.log(test);
    });

该测试正在控制台中记录undefined。我认为这可以检查.spot-info的父级。

另外，有没有办法将许多parent(0)方法链接在一起而不是使用jQuery。

最佳答案

请尝试 attr 。另外，尝试“最接近”而不是两次引用父对象:

$('.spot-info').click(function ( e ) {
    e.preventDefault();
    var test = $(this).closest('.spot').attr('data-test');
    console.log(test);
});