Question

我正在寻找这个。找到了此old article和this。但不适合我。

我的问题是：我无法通过jQuery将增量data-id设置为HTML元素。我能够提醒相同，但我没有设置HTML。如果我检查，元素没有变化。

的jQuery

$(document).ready(function() {    
   $("#search").click(function(){      
   var num = $(this).data('id');    
    num++; 
    $("span").text(num);
    $(this).data('id', num);
   });    
 });

我也尝试了这个

$(this).data('id') === num;

这是 jsFiddle Demo

我正在使用v1.9.1并且在控制台中没有错误。如果有人能找到这个问题，它会很棒。

Answer 1

所有其他答案都是正确的 - 将'val'修改为val - 这当然解决了NaN问题。

但问题是：

我不能通过jQuery将增加的data-id设置为HTML Element。我能够警告相同，但我没有设置HTML。没有变化如果我检查那个元素。

jQuery对data使用内部表示（1）。如果您想在检查器中看到data-id，则需要使用： $(this).attr('data-id', num);

（1）“内部代表”：

所有数据都存储在名为cache的jQuery对象的属性中。在控制台中记录$ .cache的内容以查看所有数据和事件与任何DOM元素相关联。

请参阅：https://stackoverflow.com/a/4385015/775359

Answer 2

问题在于这一行。

$(this).data('id', 'num');

num应该是变量，而不是字符串。

将其更改为此，它将正常工作：

$(this).data('id', num);

Answer 3

试试这个：

$(this).attr('data-id');

这是设置属性：

$(this).attr('data-id', num);

Answer 4

标准Pure Javascript data-attr

试试这个

this.dataset['id']=num;

或

this.dataset.id=num;

http://jsfiddle.net/JU4H4/8/

修改基于评论以及为什么我不使用jaquery

这是从jquery的代码中获取的data-attr的部分函数。（我不使用jquery）

function dataAttr( elem, key, data ) { var name; // If nothing was found internally, try to fetch any // data from the HTML5 data-* attribute if ( data === undefined && elem.nodeType === 1 ) { name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); data = elem.getAttribute( name ); if ( typeof data === "string" ) { try { data = data === "true" ? true : data === "false" ? false : data === "null" ? null : // Only convert to a number if it doesn't change the string +data + "" === data ? +data : rbrace.test( data ) ? jQuery.parseJSON( data ) : data; } catch( e ) {} // Make sure we set the data so it isn't changed later data_user.set( elem, key, data ); } else { data = undefined; } } return data; }

Answer 5

使用变量num，而不是字符串'num'：

$(this).data('id', num);

Updated jsfiddle demo

无法将data-id设置为HTML元素

5 个答案: