Question

我有一个工作职能：

$('#hints').after(
   '<a href="#" id="hint" class="btn btn-large btn-success" data-toggle="popover" title="" data-content="Hint 1 Content" data-original-title="Hint 1 Title">Hint 1</a>'
)

我正在尝试使用jQuery编辑data-content="Hint 1 Content"。

我的功能是：

function loadContent(riddle) {
    $('#hint').data('content','h1 content')
}

然后我致电loadContent(RIDDLE)，但这不会更改data-content代码中的<a>代码。

Answer 1

data属性映射到DOM Element对象的dataset属性，您的代码应该有效，您无法看到它被更改，因为它是属性而不是属性。

$('#hint').data('content','h1 content')
console.log( $('#hint').data('content') ) // 'h1 content'

如果要更改属性，可以使用attr方法而不是data方法，请注意，jQuery处理data-*的方式与dataset属性不同（旧浏览器+ IE 不支持。

Answer 2

这应该有效。您问题的可能解决方案：您是否使用相同的id创建了多个元素？

请尝试将其设为更详细，并使用console.log进行验证：

var el = $('<a href="#" id="hint">Hint 1</a>').data('abc', 'xyz');
console.log(el.data('abc'))
$('#hints').after(el)
console.log($("#hint").data('abc'))

jQuery.data（'abc'，'xyz'）不改变data-abc

2 个答案: