Question

我有一个代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery.js"></script><script>
$(function(){
$(".classy").data("read","hi");//Not working .working is$("div").attr("data-read","hi");

});</script>
<style>
.classy[data-read='hello']{background:#000;}.classy[data-read='hi']{background:#fff;}</style>
</head>

<body>
<div class="classy" data-read="hello">a</div>
</body>
</html>

当文档准备就绪时会发生什么，然后.classy的数据读取属性变为hi.And我有.classy[data-read='hi']的css样式设计但是当我使用.data()方法时它不起作用操作数据读取属性。当我使用.attr()方法操作数据读取时，它可以工作。为什么？

Answer 1

你误解了data-xxx的用途。它用于填充HTML标记内的数据，以后可以使用.data()使用jQuery检索。

示例：

console.log($('.classy').data('read'));

$(".classy").data("read","hi");

console.log($('.classy').data('read'));

输出：

hello
hi

稍后更改该数据时，它不会再更改元素的data-xxx属性;这也使它成为条件CSS处理的不良候选者。

您应该将.addClass()，.toggleClass()和.removeClass()与CSS类选择器结合使用才能使其正常工作。

.data（）没有按预期工作

1 个答案: