Javascript 如何在 Jquery 中获取 data-id 属性值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39264003/
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 data-id attribute value in Jquery?
提问by Balakumar B
HTML CODE
代码
<tbody>
<tr>
<td>0</td>
<td>204093D-P12</td>
<td>80443</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>1</td>
<td>216619D-P18</td>
<td>16009</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>2</td>
<td>21663P0012</td>
<td>13116</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>3</td>
<td>217496D-P078</td>
<td>16032</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr>
</tbody>
And i have to tried to get data-id attribute value from using Jquery in following way
我必须尝试通过以下方式使用 Jquery 获取 data-id 属性值
function ShowModal(){
alert($(this).attr("data-id"));
}
but return undefinedhow to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?
但返回undefined如何从 jquery 获取数据 ID 值？我还有一个疑问 data-id 值可以保存数值还是字符串值？
回答by Satpal
You need to pass the current element context in inline click handler like
您需要在内联单击处理程序中传递当前元素上下文，例如
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
Then use the passed elementreference to get the data-id. You can also use HTMLElement.datasetproperty like elem.dataset.id
然后使用传递的element引用来获取data-id. 您还可以使用HTMLElement.dataset属性，如elem.dataset.id
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
Additionally, I would recommend you use jqueryto bind event handler's instead of ugly inline click handler.
此外，我建议您使用jquery来绑定事件处理程序而不是丑陋的内联点击处理程序。
回答by Rahul Pawar
One of the important part of jquery is manipulate the DOM.
jquery 的重要部分之一是操作 DOM。
DOM = Document Object Model: Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM = 文档对象模型：文档对象模型 (DOM) 是一种平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。
It has several DOM Manipulation :
它有几个 DOM 操作：
- Get Content: text(), html(), and val()
- Get Attributes: attr()
- 获取内容：text()、html() 和 val()
- 获取属性：attr()
Now if u have to access a particular attribute on click of button or something else then use this :
现在，如果您必须通过单击按钮或其他方式访问特定属性，请使用以下命令：
so here is my HTML
所以这是我的 HTML
<p><a href="http://www.google.com" id="test" data-id="id_12345">google.com</a></p>
<button>Click Here</button>
then u have to access the attributes of anchor tag like this:
然后你必须像这样访问锚标记的属性：
$("button").click(function(){
alert($("#test").attr("href")); // output : http://www.google.com
alert($("#test").attr("data-id")); // output : id_12345
});
回答by Morteza Tourani
You can use Javascript's dataset or JQuqerydatamethod:
您可以使用Javascript的数据集或JQuqerydata方法：
$(document).ready(function() {
$('button').on('click', function() {
console.log(this.dataset.id, $(this).data().id, $(this).data('id'));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr>
<td>
<button type="button" data-id="1">btn #1</button>
<button type="button" data-id="2">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="3">btn #1</button>
<button type="button" data-id="4">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="5">btn #1</button>
<button type="button" data-id="6">btn# 2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="7">btn #1</button>
<button type="button" data-id="8">btn #2</button>
<br>
</td>
</tr>
</tbody>回答by Chamith Saranga
$(function () {
$(".inputs").click(function (e) {
alert($(this).attr("data-id"));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-xs btn-flat inputs" value="click" type="button" data-toggle="modal" data-id="217496D-P078" data-target="#myModal"/>回答by Abhishek Dhanraj Shahdeo
Your code is correct, all need to do is pass this to your function like:
您的代码是正确的，所有需要做的就是将其传递给您的函数，例如：
<button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal(this)"><i class="fa fa-plus" aria-hidden="true"></i></button>
回答by Nitya Kumar
You have to create unique data-id in your code data-id not unique.
data-id="217496D-P078" data-target="#myModal" type="button" title="Add"
data-id="217496D-P078" data-target="#myModal_edit" type="button" title="
data-id="217496D-P078" data-target="#myModal_details" type="button" titl
then
Try this
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
