.data() ne fonctionne pas comme prévu

J'ai un code.data() ne fonctionne pas comme prévu

<!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>

Ce qui se passe est lorsque le document est prêt l'attribut de données lecture des modifications .classy à hi.And j'ai une conception de style css pour .classy[data-read='hi'] mais il ne fonctionne pas lorsque j'utilise la méthode .data() pour manipuler l'attribut de lecture de données. Il fonctionne quand j'utilise la méthode .attr() pour manipuler la lecture de données.Pourquoi?

Source

2012-06-10 Anonymous

car '.data()' ne définit pas d'attribut - son utilisé pour stocker les informations associées à l'élément DOM – ManseUK

Donc, je ne peux pas utiliser .data() dans ce cas –

utiliser un 'class' à la place – ManseUK

Vous avez mal compris l'utilisation de data-xxx. Il est utilisé pour remplir les données à l'intérieur des balises HTML qui peuvent être récupérées ultérieurement à l'aide de jQuery en utilisant .data().

Exemple:

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

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

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

Sortie:

hello 
hi

Lors d'un changement que les données plus tard, il ne changera pas l'attribut data-xxx (s) de l'élément plus; cela en fait aussi un mauvais candidat pour un traitement CSS conditionnel.

Vous devez utiliser .addClass(), .toggleClass() et .removeClass() en combinaison avec des sélecteurs de classes CSS pour le faire fonctionner.

Source

2012-06-10 12:13:11

pourquoi pas toggleClass() –

@Somebodyistrouble sûr, pourquoi pas :) ajouté à la réponse –

.data() ne fonctionne pas comme prévu

Répondre

Questions connexes