2

我有一个代码

<!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。我有一个 css 样式设计，但是当我使用方法来操作数据读取属性时它.classy[data-read='hi']不起作用。当我使用方法时它起作用操纵数据读取。为什么？.data().attr()

4

1 回答 1

1

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

例子：

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

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

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

输出：

hello
hi

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

您应该使用.addClass(),.toggleClass()并.removeClass()与 CSS 类选择器结合使用以使其工作。

于 2012-06-10T12:13:11.180 回答