Question

我有这段代码：

<div class="container">
     <div class="switchStatus btn-group" data-module="xxx">
          <a class="btn btn-primary">Active</a>
          <a class="btn btn-primary">Inactive</a>
     </div>
</div>

如何获取data-module内容？

实际上，我的代码看起来像这样，但它不起作用：

$('.container').on('click', '.switchStatus a', function() {
    var module = $(this).data('module');
});

感谢。

Answer 1

尝试

var module = $(this).parent().data('module');

Answer 2

在您的点击处理程序回调函数中，this context将绑定到被点击的<a>元素。要获取父级，您可以将.closest()方法与选择器一起使用。它可能如下所示：

$(this).closest("[data-module]").attr("data-module");

Answer 3

使用最近的（'。switchStatus'）。

jQuery将回调函数的范围设置为元素回调的主题

所以我猜这意味着on选择器参数中的元素（在这种情况下为.switchStatus）

$('.container').on('click', '.switchStatus a', function(event) {
    var module = $(this).closest('.switchStatus').data('module');
    console.log('My name is ' + module)
    event.stopPropagation() // always good to stop event bubbles after you have used them.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <div class="switchStatus btn-group" data-module="Spartacus">
          <a class="btn btn-primary">Active</a>
          <a class="btn btn-primary">Inactive</a>
     </div>
</div>

Answer 4

试试这个，清除节点'a'

$('.container').on('click', '.switchStatus', function() {
    var module = $(this).data('module');
    alert(module);
});

从jQuery中单击的父级获取值

4 个答案: