jquery: onclick change la couleur de fond

J'ai suivantes UL - LI html.

<UL>
<LI><span id='select1'>Text</span></LI>
<LI><span id='select2'>Text</span></LI>
<LI><span id='select3'>Text</span></LI>
<LI><span id='select4'>Text</span></LI>
<LI><span id='select5'>Text</span></LI>
<LI><span id='select6'>Text</span></LI>
</UL>

Si je clique sur certains <span>, sa couleur d'arrière-plan doit être modifié. c'est à dire si je clique sur la durée de l'avoir id='select3', sa couleur d'arrière-plan doit être modifié.

Comment cela peut être fait à l'aide de jQuery?

Attacher un gestionnaire de clic sur les travées dans laquelle vous changez la couleur d'arrière-plan. Qu'est-ce exactement avez-vous besoin de savoir? Qu'avez-vous essayé?

OriginalL'auteur gautamlakum | 2011-02-24

  1. 6

    Essayez celui-ci :

    $('li span[id^="select"]').click(function(){
   $(this).css('background-color',"#ccc")
})

    ce qu'il n'est, en cliquant sur le span à l'intérieur de li ayant pour id commençant par "sélectionner" change le backgound couleur.

    OriginalL'auteur Prakash

  2. 1

    Vous pouvez utiliser les éléments suivants

    jQuery("#select1").click(function(){jQuery(this).css({'background-color':'red})});

    Espère que cela aide.

    Mise à jour de ma réponse à mis gestionnaire sur chaque sélectionnez. Vous pouvez ajouter l'attribut de votre durée éléments pour représenter les couleurs. par exemple,<span >Text</span>.
    Et puis vous pouvez écrire gestionnaire

    jQuery("ul span[id^='select']").click(function(){jQuery(this).css({'background-color':jQuery(this).attr('rel')})});
    Cela ne fera qu'ajouter le gestionnaire de clic sur le premier élément. La conversion à appliquer à plusieurs éléments doivent être facile, mais vous devriez le mentionner.
    oui, ici le #pas de <LI>s sera dynamique. alors que dois-je faire?
    La réponse a été mise à jour pour gérer. Merci.

    OriginalL'auteur Alexey Ogarkov

  3. 0

    Essayer 

    $("span").click(function(){
  if($(this).attr('id') == "select3") $(this).css('background-color', 'red');
});
    il y a probablement un moyen de combiner l'instruction if dans le sélecteur, mais je ne fais pas beaucoup de jQuery
    Cela ne fonctionnera pas. Il n'y a pas select éléments dans le code.
    Non seulement il n'y a pas de sélectionner des éléments, mais : devrait , dans la méthode css.
    lol désolé, pas réussi à modifier Alexey réponse

    OriginalL'auteur TimCodes.NET

  4. 0

    Si vous avez beaucoup d'éléments de la liste, vous pouvez utiliser l'événement de délégation et de gérer un clic sur le ul. Ainsi, vous pouvez faire

    $('ul').click(function(event) {
    switch($(event.target).attr('id')) {
        case select1:
            $(event.target).css('background-color', 'red');
            break;
        //More case statements
    }
});

    OriginalL'auteur Andrea