Javascript 如何获取数据id属性？

我正在使用jQuery quicksand插件。我需要获取单击项的数据id并将其传递给Web服务。 如何获取数据id属性？我正在使用

.on（）

方法重新绑定排序项目的单击事件

$（“#list li”）。在（'click'，function（）上{
//ret=DetailsView.GetProject（$（this.attr（“#数据id”）、OnComplete、OnTimeOut、OnError）；
警报（$（this.attr（#数据id））；
});




获取属性
数据id的内容（如
（如果使用较新的jQuery>=1.4.3）

并且
data-
之后的部分必须是小写的，例如
data idNum
将不起作用，但是
data idNum
将起作用。如果我们想使用现有的本机JavaScript检索或更新这些属性，那么我们可以使用getAttribute和setAttribute方法，如下所示：

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

我使用$.data-

如果您不关心旧的IE浏览器，也可以使用

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

<span id="spanTest" data-value="50">test</span>

演示：

完整浏览器支持列表：

对我有用！
重要提示。请记住，如果您通过JavaScript动态调整
数据-
属性，它将不会反映在
数据（）
jQuery函数中。您还必须通过
数据（）
函数进行调整

<a data-id="123">link</a>

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

<span id="spanTest" data-value="50">test</span>

或

答复：50

对我有用！
没人提到，这让我很惊讶：

<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"));
});


马自达
本田
梅赛德斯
丰田
$（“#选择车辆”）。更改（功能（）{
警报（$（this）.find（'：selected'）.data（“年”）；
});

下面是一个工作示例：
使用自己的
id
访问数据属性对我来说有点容易

$（“#Id”）.data（“属性”）；


函数myFunction（）{
警报（$（“#按钮1”）。数据（“样本id”）；
}

使用jQuery单击此处
：

  $( ".myClass" ).load(function() {
    var myId = $(this).data("id");
    $('.myClass').attr('id', myId);
  });

这段代码将返回数据属性的值，例如：数据id、数据时间、数据名称等，我已经为id显示了这些值

<a href="#" id="click-demo" data-id="a1">Click</a>

//获取数据id->a1的值

$(this).data("id", "a2");

//这将更改数据id->a2

$(this).data("id");

//获取数据id->a2的值对于那些希望动态删除并重新启用工具提示的人，可以使用
dispose
和
enable
方法。请参见我有一个span。我想获取属性数据txt lang的值，该值已定义

$(this).data("id");

$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});

$（文档）.ready（函数（）
{
EN
警报（$（'.txt-lang btn'）.attr（'data-txt-lang'））；
});
问题在于您没有指定下拉列表或列表的选项或选定选项，这里是一个下拉列表的示例，我假设是数据属性数据记录

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });

试一试


$（“#list li”）。在（'click'，function（）上{
警报（this.dataset.id）；
})；




新访问者注意：JQuery的.live（）方法已被弃用，取而代之的是.on（）。您应该从警报中删除#，您不需要它：-）attr（“#数据id”））错误。更正：attr（“数据id”）@BruceAdams使用
on（）
方法编辑这个问题可能是值得的，因为
live（）
现在已被弃用，这个问题吸引了不少访问者。TFM说，我不得不使用
attr（）
，因为jQuery使用
data（）
从邮政编码中去掉前导零“从jQuery1.4.3HTML5数据开始，属性将自动拉入jQuery的数据对象。。。每次尝试都会将字符串转换为JavaScript值（包括布尔值、数字、对象、数组和null）。只有在不改变值的表示形式的情况下，才会将值转换为数字。例如，“1E02”和“100.000”等同于数字（数值100），但转换它们会改变它们的表示形式，使它们保留为字符串。“这对我来说是返回‘未定义’。虽然对某些人来说很明显，但我认为值得注意的是，当使用.attr（）时，括号内的文本必须与您设置为自定义数据属性的内容匹配。即，如果自定义数据属性是数据卷，则必须使用.attr（“数据卷”）引用它。”。并且，使用jQuery 1.4.3以上版本并使用.data（），括号内的文本必须与没有数据前缀的自定义数据属性相匹配。即，如果自定义数据属性是数据量，则必须使用.data（“volume”）引用它。对于报告它不起作用的用户，请确保您的属性只包含小写字母。例如“data listId”应为“data listId”。有关原因，请参见。或
$（this）.data（）.id//返回123
好的点…是否有数据（）.refresh以刷新属性中的数据？这是动态更改和访问数据属性值的一个重要点。回答很好。非常感谢。很高兴看到一个真正有效的方法，并且在实际工作中发挥了作用。尝试此主题时，有太多其他“答案”无法正常工作，因为没有上下文given，有时候“答案”的语法是完全错误的。谢谢。另一个实际有效的例子。这个线程正在运行中。谢谢Aravindh和Zakaria.Nice。但是如果你想在javascript中添加一些上下文，即使没有小提琴，也会真的提高答案的清晰度，至少对我来说是这样。比如$（“#点击演示”）。on（'click'，function（）{alert（$（this.data（“id”）；$（this.data（“id”）；$（this.data（“a2”）；alert（$（this.data（“id”））；}）您提到过，在使用jQuery更新数据时，我们必须使用function.attr（'data-fruit'）来获取更新的“数据”，这对我来说是非常有用的部分！非常感谢
  $( ".myClass" ).load(function() {
    var myId = $(this).data("id");
    $('.myClass').attr('id', myId);
  });

<a href="#" id="click-demo" data-id="a1">Click</a>

$(this).data("id");

$(this).data("id", "a2");

$(this).data("id");

$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });

this.dataset.id