jQuery modifier le texte dans div en utilisant l'attribut "data"

Question

Dans l'interface utilisateur jQuery Tabs, j'utilise cette fonction (grâce à SO'ers) pour modifier le CSS d'un div afin de montrer une image particulière en fonction des données -image attribut de l'onglet actif.

Fonction:

var img = $(ui.panel).data("image"); 
$("#headerwrapper") 
.animate({ opacity: 'toggle' }, function() { 
$(this).css("background-image", "url(" + img + ")") 
.animate({ opacity: 'toggle' }); 
}); 
} 

HTML et CSS:

html dans la structure onglets:

<div id="home" data-image="/images/water.jpg">tab content</div 

<div id="about" data-image="/images/office.jpg">tab content</div> 

    ...more tabs... 

css (water.jpg est par défaut en l'absence de données image est présent):

#headerwrapper {background: url(images/water.jpg);} 

Donc, je peux créditer correctement le photographe lorsque son image est affichée: comment changer cette fonction (voir ci-dessous) afin d'utiliser un attribut de données correspondant appelé crédit pour changer le texte de avec l'onglet actif? Et peut-on avoir deux attributs de données différents dans le HTML? Ou y a-t-il un meilleur moyen?

Fonction:

var img = $(ui.panel).data("credit"); 
$("#headerwrapper") 
.animate({ opacity: 'toggle' }, function() { 

$(this).css("background-image", "url(" + img + ")") //what goes here in order 
                //change data-credit 
                //in the div photocredit? 
.animate({ opacity: 'toggle' }); 
}); 
} 

HTML: dans la structure des onglets:

<div id="home" data-image="/images/water.jpg" data-credit="Photog1">tab content</div 

<div id="about" data-image="/images/office.jpg" data-credit="Photog2">tab content</div> 

     ...more tabs... 

Dans le bas de page du site (hors #headerwrapper):

<div id="photocredit"></div> 

Et , quel est le CSS f ou #photocredit? Tout ceci: #photocredit {}

Answer 1

Utilisez la fonction attr pour changer l'attribut de div tag:

$(this).attr("data-credit", "Photographer..."); 

Answer 2

Voici une façon de régler le Crédit photo

Exemple Ici: http://jsfiddle.net/pxfunc/VhvvG/

jQuery modifié:

var $home = $('#home'); 

$('#headerwrapper').animate({ 
    opacity: 'toggle' 
}, function() { 
    $(this).css("background-image", "url(" + $home.data('image') + ")").animate({ 
     opacity: 'toggle' 
    }).children('#photocredit').html($home.data('credit')); // set the photo credit from data-credit attribute to the child element #photocredit 
}); 

---

Je suppose que l'<div id="photocredit"></div> est un élément enfant de l'élément <div id="headerwrapper"..., si ce n'est pas faire quelque chose comme

$('#headerwrapper').animate({ 
    opacity: 'toggle' 
}, function() { 
    $(this).css("background-image", "url(" + $home.data('image') + ")").animate({ 
     opacity: 'toggle' 
    }) 
}); 
$('#photocredit').html($home.data('credit')); // set the photo credit from data-credit attribute to the child element #photocredit