JQuery - cliquant poignée
Question
J'ai une telle construction:
<div id="slider">
<div id="nav">
<div class="sliderPart">
<a href="#computers">
<strong>1</strong>
</a>
</div>
<div class="sliderPart">
<a href="#network">
<strong>2</strong>
</a>
</div>
<div class="sliderPart">
<a href="#web">
<strong>3</strong>
</a>
</div>
<div class="sliderPart">
<a href="#support">
<strong>4</strong>
</a>
</div>
</div>
<div id="slider-content">
<a href="#computers" id="slider-computers" class="slider-block">Test1</a>
<a href="#network" id="slider-network" class="slider-block">Test 2</a>
<a href="#web" id="slider-web" class="slider-block">Test 3</a>
<a href="#support" id="slider-support" class="slider-block">Test 4</a>
</div>
</div>
Maintenant, je dois gérer en cliquant sur ' nav et curseur contenu et obtenir élément cliqué href attribut.
$('#slider').click(function(){
console.log( $(this) );
});
En utilisant ce code je reçois
[div curseur #]
La solution
Utilisez attr
pour obtenir ou définir les valeurs d'attribut d'un élément:
$('#slider a').click(function(){
console.log( $(this).attr('href') );
});
Le #slider
sélecteur se réfère à l'élément div qui est pourquoi sorties Firebug [div#slider]
. Vous pouvez cibler des ancres dans l'aide de la ancêtre descendant sélecteur:
Allumettes tous les éléments descendants spécifié par « descendant » d'éléments spécifié par "ancêtre".
Ce qui signifie que de mettre l'élément descendant après l'ancêtre, séparés par un espace comme dans l'exemple ci-dessus - $('#slider a')
Pour votre information AS DE VER 1.6 .prop () introduit. Plus d'infos
La différence entre les attributs et les propriétés peuvent être importantes dans des situations particulières. Avant de jQuery 1.6, la méthode .attr () prend parfois des valeurs de propriété en compte lors de la récupération des attributs, ce qui pourrait causer un comportement incohérent. A partir de jQuery 1.6, la méthode .prop () fournit un moyen de récupérer explicitement la valeur des propriétés, tandis que .attr () récupère les attributs. Plus d'infos
Par exemple, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked et defaultSelected doivent être récupérés et réglés avec la méthode .prop (). Avant jQuery 1.6, ces propriétés ont été récupérées par la méthode .attr (), mais ce ne fut pas dans le cadre de attr. Ceux-ci ne sont pas les attributs correspondants et sont uniquement les propriétés. Plus d'infos