Comment ajouter une classe sur cliquez avec jQuery pour élément de la liste?

J'ai un élément de la liste comme 

<ul>
    <li><img id="1" src="" /></li>
    <li><img id="2" src="" /></li>
    <li><img id="3" src="" /></li>
</ul>

<input type="button" >

Je voudrais sur cliquez de tout élément de la liste pour ajouter la classe et de supprimer d'autres avec jQuery. Essentiellement à faire un seul élément sélectionné à la fois.

et sur le bouton cliquez pour afficher l'id de l'élément de liste sélectionné

  • Jetez un oeil à ma réponse que cela permettra d'ajouter et de supprimer des classes que vous le souhaitez ET le bouton de rapporter correctement l'ID de la img tag dans les sélectionnés li
  • Essayez ceci: stackoverflow.com/questions/16285459/...
InformationsquelleAutor Eugene | 2011-09-20
  1. 6

    Cela va faire ce que vous voulez ET vous obtenez l'ID de la img étiquette à l'intérieur du li

    $('ul > li').click(function() { 
  $('ul > li').removeClass('active'); 
  $(this).addClass('active'); 
});

$('input:button').click(function() {
  alert($('li.active img')).attr('id')); 
});
    • +1 pour repérer la balise d'image que j'ai manquée.
    • quoique... 🙂 est en train de faire $('img', $('li.active')) vraiment nécessaire. Qui permettrait de créer 2 jQuery objets où l'on fera l'amende juste ou j'ai loupé quelque chose?
    • juste une autre façon de réellement faire $('li.active').find('img');
    InformationsquelleAutor John Hartsock
  2. 1
    $('li').click(function() { //should be better selector than just li
  $('li').removeClass('active'); //remove all active classes
  $(this).addClass('active'); //add active class to element clicked
});

$('input[type="button"]').click(function() {
  alert($('li.active img').attr('id')); //get active id
});

    MODIFIER
    mal lu votre code. Ajouté le correctif pour obtenir l'id de la balise image.

    InformationsquelleAutor PeeHaa
  3. 1

    Voir de travail ici http://jsfiddle.net/usmanhalalit/Jbh3q/1/

    J'ai légèrement changé votre balisage pour correspondre à la norme(juste ajouté id) et ajouté un fond rouge pour montrer l'effet de la tripoter.

    Balisage:

    <ul id="myul">
    <li><img id="1" src="" /></li>
    <li><img id="2" src="" /></li>
    <li><img id="3" src="" /></li>
</ul>

<input id="btn" type="button" value="click" />

    JavaScript:

    $(function(){

    $("#myul li").click(function(){
        $("#myul li").removeClass('selected');    
        $("#myul li").css('background','none');    
        $(this).css('background','red');   
        $(this).addClass('selected');    
    });

  $('#btn').click(function(){
    alert( $('.selected img').attr('id') );
  });

});
    InformationsquelleAutor Muhammad Usman
  4. 0
    //On li click
$("li").click(function() {
  //Reset them
  $("li").removeClass("yourClass");
  //Add to the clicked one only
  $(this).addClass("yourClass");
});

//On button click
$("input[type=\"button\"]").click(function() {
  //Echo the id of selected li
  alert($(".yourClass").attr("id"));
});
    InformationsquelleAutor Morgan Delaney