获取数据属性值onclick链接/按钮

Question

<span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="daily"><i></i>Daily</span>
            <span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="1week"><i></i>1 Week</span>
            <span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="monthly"><i></i>Month</span>
            <span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="3Month"><i></i>3 Month</span>

jquery是

$('#changeb').click(function() {

        var d = $(this).data('datac');      
        alert(d);   
} );

我需要在click事件中获取data-datac值,

Answer 1

您的代码很好,您对多于一个无效的元素具有相同的ID.该事件将绑定到第一个元素,其中包含给定的id DOM.使用公共类而不是id来绑定事件.您可以使用类选择器绑定事件.

现场演示

$('.btn').click(function() {
      var d = $(this).data('datac');      
      alert(d);   
});

Answer 2

这应该做的伎俩:

var d = $(this).attr("data-datac");

此外,您需要更改HTML以为每个元素分配一个单独的ID.但是,为许多不同的id绑定点击事件可能是一项繁琐的工作.所以我将它绑定到一个单独的类.例如:

HTML

<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb1" data-datac="daily"><i></i>Daily</span>
<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb2" data-datac="1week"><i></i>1 Week</span>
<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb3" data-datac="monthly"><i></i>Month</span>
<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb4" data-datac="3Month"><i></i>3 Month</span>

使用Javascript

$(".dateChanger").click(function () {
    var d = $(this).attr("data-datac");
    alert(d);
});