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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20540361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:12:52  来源:igfitidea点击:

get data attribute value onclick link / button

jqueryhtml

提问by Steve Bals

<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>

the jquery is

jquery是

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

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

I need to get the data-datac value on click event ,

我需要在点击事件上获取 data-datac 值,

回答by Adil

Your code is fine you have same id for more then one elementwhich is not valid. The event will be binded to firstelement with given id in the DOM. Use common class instead of id to bind the event. You can use class selectorto bind the event.

您的代码很好,您对多个无效元素具有相同的 ID。该事件将被绑定到第一个与给定id元素DOM。使用通用类而不是 id 来绑定事件。您可以使用类选择器来绑定事件。

Live Demo

现场演示

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

回答by R.A.E

This should do the trick:

这应该可以解决问题:

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

Also, you need to change your HTML to give each element a seperate id. But it can be a tedious task to bind click events for a number of different ids. So i'd bind it to a seperate class. For example:

此外,您需要更改 HTML 以给每个元素一个单独的 id。但是为许多不同的 id 绑定点击事件可能是一项繁琐的任务。所以我会把它绑定到一个单独的类。例如:

HTML

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

Javascript

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

回答by Illaya

Its Simple....

这很简单....

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

回答by Hanady

You can't set all the elements a unique id. That's why it's happening only for the first element.

您不能将所有元素设置为唯一的id。这就是为什么它只发生在第一个元素上。

回答by HTTP

You can get attribute values of an element using the attrin jquerylike

您可以使用attrin jquerylike获取元素的属性值

$('.home').on('click', function() {

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

F.Y.I

供参考

If you will use id'sas selector you can only get one element while on a classyou can get reference all the elements containing that class

如果您将id's用作选择器,则只能获得一个元素,而在 a 上,class您可以获得包含该类的所有元素的引用

回答by ATeba

Use a unique id for each element

为每个元素使用唯一的 id

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