Javascript 如何获取 data-id 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5309926/
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
How to get the data-id attribute?
提问by Bruce Adams
I'm using the jQuery quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice.
How do I get the data-id attribute? I'm using the .on()method to re-bind the click event for sorted items.
我正在使用 jQuery 流沙插件。我需要获取单击项目的数据 ID 并将其传递给网络服务。如何获取 data-id 属性？我正在使用该.on()方法重新绑定已排序项目的点击事件。
$("#list li").on('click', function() {
// ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
alert($(this).attr("#data-id"));
});<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<ul id="list" class="grid">
<li data-id="id-40" class="win">
<a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
<img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
</a>
</li>
</ul>回答by Marcel Hymanwerth
To get the contents of the attribute data-id(like in <a data-id="123">link</a>) you have to use
要获取属性的内容data-id（如 in <a data-id="123">link</a>），您必须使用
$(this).attr("data-id") // will return the string "123"
or .data()(if you use newer jQuery >= 1.4.3)
或.data()（如果您使用较新的 jQuery >= 1.4.3）
$(this).data("id") // will return the number 123
and the part after data-must be lowercase, e.g. data-idNumwill not work, but data-idnumwill.
后面的部分data-必须是小写的，例如data-idNum不会工作，但data-idnum会。
回答by Lalit Kumar Maurya
If we want to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:
如果我们想使用现有的原生JavaScript检索或更新这些属性，那么我们可以使用 getAttribute 和 setAttribute 方法来实现，如下所示：
Through JavaScript
通过 JavaScript
<div id='strawberry-plant' data-fruit='12'></div>
<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>
Through jQuery
通过jQuery
// Fetching data
var fruitCount = $(this).data('fruit');
OR
// If you updated the value, you will need to use below code to fetch new value
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');
// Assigning data
$(this).attr('data-fruit','7');
回答by Serge Shultz
Important note. Keep in mind, that if you adjust the data-attributedynamically via JavaScript it will NOT be reflected in the data()jQuery function. You have to adjust it via data()function as well.
重要的提示。请记住，如果您通过 JavaScript 动态调整data-属性，它将不会反映在data()jQuery 函数中。您还必须通过data()功能对其进行调整。
<a data-id="123">link</a>
js:
js：
$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321
回答by Roni
If you are not concerned about old IE browsers, you can also use HTML5 dataset API
如果你不关心旧的 IE 浏览器，你也可以使用HTML5 dataset API
HTML
HTML
<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>
JS
JS
var myDiv = document.querySelector('#my-div');
myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"
Demo: http://html5demos.com/dataset
演示：http: //html5demos.com/dataset
Full browser support list: http://caniuse.com/#feat=dataset
完整的浏览器支持列表：http: //caniuse.com/#feat=dataset
回答by curiousBoy
Surprised no one mentioned:
没想到没人提到：
<select id="selectVehicle">
<option value="1" data-year="2011">Mazda</option>
<option value="2" data-year="2015">Honda</option>
<option value="3" data-year="2008">Mercedes</option>
<option value="4" data-year="2005">Toyota</option>
</select>
$("#selectVehicle").change(function () {
alert($(this).find(':selected').data("year"));
});
Here is the working example: https://jsfiddle.net/ed5axgvk/1/
这是工作示例：https: //jsfiddle.net/ed5axgvk/1/
回答by bamossza
HTML
HTML
<span id="spanTest" data-value="50">test</span>
JS
JS
$(this).data().value;
or
或者
$("span#spanTest").data().value;
ANS : 50
答案：50
Works for me!
为我工作！
回答by Aravindh Gopi
Accessing data attribute with its own idis bit easy for me.
使用自己的数据属性访问数据属性id对我来说有点容易。
$("#Id").data("attribute");
$("#Id").data("attribute");
function myFunction(){
alert($("#button1").data("sample-id"));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>回答by ofir_aghai
var id = $(this).dataset.id
works for me!
为我工作！
回答by Gjermund Dahl
I use $.data - http://api.jquery.com/jquery.data/
我使用 $.data - http://api.jquery.com/jquery.data/
//Set value 7 to data-id
$.data(this, 'id', 7);
//Get value from data-id
alert( $(this).data("id") ); // => outputs 7
回答by Ashokkumar C
This piece of code will return the value of the data attributes eg: data-id, data-time, data-name etc.., I have shown for the id
这段代码将返回数据属性的值，例如：data-id、data-time、data-name 等，我已经为 id 显示了
<a href="#" id="click-demo" data-id="a1">Click</a>
js:
js：
$(this).data("id");
// get the value of the data-id -> a1
// 获取data-id的值 -> a1
$(this).data("id", "a2");
// this will change the data-id -> a2
// 这将改变数据 ID -> a2
$(this).data("id");
// get the value of the data-id -> a2
// 获取data-id的值 -> a2
