Sélecteurs dynamiques avec Jquery avec php while loop

Question

J'ai une boucle while qui crée une liste de tags d'ancrage chacun avec un nom de classe unique comptant de 1 à de nombreux éléments. Je voudrais changer un attriubute de css sur une étiquette d'ancre spécifique et une classe quand on clique dessus ainsi disons que la couleur de fond est changée. Voici mon code

while($row = mysql_fetch_array($results)){ 
$title = $row['title']; 
$i++; 
echo "<a class='$i'>$title</a> 

} 

Je voudrais que mon jquery regarder quelque chose comme ça, il va évidemment être plus compliqué que cela, je suis juste confus où commencer.

$(document).ready(function() { 
$('a .1 .2 .3 .4 and so on').click(function() { 
$('a ./*whichever class was clicked*/').css('background':'red'); 
     }); 
    }); 

Answer 1

Pouvez-vous donner à la classe un nom plus cohérent? Comme myClass_1, myClass_2, etc.

Ensuite, vous pouvez faire:

$(document).ready(function() { 
    $('a[class^=myClass_]').click(function() { // Assign handler to elements with a 
               // class that starts with 'myClass_' 
     $(this).css('background','red'); // Change background of clicked one. 

    }); 
}); 

Ici, un « commence par » sélecteur est utilisé pour affecter l'événement à toutes les classes qui commencent par myClass.

Vous pouvez toujours récupérer le numéro d'index si nécessaire.

Dans le gestionnaire d'événements, $(this) fait référence à celui sur lequel vous avez cliqué.

Un exemple concret:http://jsfiddle.net/Jurv3/

Docs pour "commence par" sélecteur:http://api.jquery.com/attribute-starts-with-selector/

EDIT: Je eu un manque ] dans le sélecteur. Fixé maintenant

Answer 2

Vous pouvez utiliser un itérateur sur un tableau comme celui-ci:

var myclasses = [".1",".2",".3"]; // generated by php 

$.each(myclasses, function(index, value) { 
    $('a '+value).click(function() { 
     $(this).css('background':'red'); 
    }); 
}); 

Note: Je pense que vous pourriez être mieux en utilisant ID unique pour chaque élément dans la liste des balises d'ancrage et ont tous partagent une seule classe. C'est plus à quoi servent les classes et les IDs.

Answer 3

Donnez-leur simplement la même classe, par exemple, myClass. Puis:

$('a.myClass').click(function() { 
    $(this).css('background':'red'); 
}); 

Cela fonctionne aussi longtemps que vous éprouvez les liens fonctionnent sur eux-mêmes, ou leurs parents - aussi longtemps que la relation entre le lien et la cible est la même pour chacun. Pour opérer sur le parent, ce serait $(this).parent().css(...), et pour fonctionner sur l'élément suivant, ce serait $(this).next().css(...) et ainsi de suite.

Answer 4

Avez-vous essayé quelque chose dans quelque chose comme ça?

while($row = mysql_fetch_array($results)){ 
$title = $row['title']; 
$i++; 
echo '<a class="anchor_link" id="'.$i.'">'.$title.'</a>'; 

} 

Et puis pour le jQuery:

$(document).ready(function() { 
    $('a.anchor_link').click(function() { 
     var thisAnchor = $(this).attr('id'); 
     $(this).css('background':'red'); 
    }); 
}); 

La raison de mon ajouter le var js « thisAnchor » est parce que je suppose que vous avez besoin que je $ variable php comme marqueur d'ancrage? Si c'est le cas, vous pouvez simplement prendre le js var et l'utiliser comme vous le souhaitez. Si vous ne pouvez pas utiliser l'ID parce que le contenu ancré est marqué par id, utilisez un attribut diferent, tel que 'title' ou 'alt'.

J'espère que cela a été utile.