Comment sélectionner et désélectionner un élément li en utilisant jquery?

Ici, je sélectionne un élément li dans une liste et change la bordure de cet élément li mais si je sélectionne un autre élément li, la bordure de l'élément actuellement sélectionné change mais la couleur de la bordure sélectionnée doit changer pour l'original couleurComment sélectionner et désélectionner un élément li en utilisant jquery?

Voici mon code

$(document).ready(function() { 
     $("#list3 li").click(function() { 
      $("list3 li.clicked").removeClass("clicked"); 
      $(this).addClass("clicked"); 
      $(".clicked").css("border", "3px solid red"); 

     }); 
    });

Toute suggestion?

Source

2012-03-22 bala3569

Que diriez-vous plutôt que de définir des styles en ligne en utilisant 'Css()' vous ajoutez simplement les propriétés CSS que vous souhaitez modifier la définition de la classe 'clicked'? –

Je pense que les liens suivants pourraient vous donner la réponse: http://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery et http: // stackoverflow. com/questions/8452277/jquery-select-unselect-multiselect-options-avec-remplacement-divs – Janaki

@Dubious Avez-vous lu cette question ou l'un de ceux que vous avez liés? Ils ne demandent pas du tout des choses similaires. –

Vous pouvez réaliser ceci avec moins de code. Ecrire comme ceci:

$("#list3 li").click(function() { 
      $("#list3 li").removeClass('clicked'); 
      $(this).addClass('clicked'); 

     });

Cocher cette http://jsfiddle.net/q4qR8/1/

Source

2012-03-22 12:10:58 sandeep

il fonctionne très bien .. je l'ai essayé pour mouseover comme $ ("# list4 li"). Mouseover (function() { $ ("# liste4 li"). RemoveClass ('mouseover'); $ (ceci) .addClass ('mouseover'); }); – bala3569

il fonctionne également mais quand je laisse la souris de list1 à list2..le dernier élément de mouseover li a cette frontière. Comment enlever cette frontière tout en traversant d'une liste à une autre liste – bala3569

vous devez définir l'événement de mouseout également comme ceci http : //jsfiddle.net/q4qR8/2/ – sandeep

Ajouter une définition CSS pour la classe clicked au fichier CSS externe pour votre page ou dans une balise <style>, comme ceci:

.clicked { 
    border: 3px solid red; 
}

De cette façon, les poignées CSS le style pour vous, et la frontière devrait automatiquement revenir à son état précédent une fois que vous supprimez la classe.

Source

2012-03-22 12:01:07

$(document).ready(function() { 
     $("#list3 li").click(function() { 
      $("#list3 li").css("border", "none"); 
      $(this).css("border", "3px solid red"); 

     }); 
    });

Source

2012-03-22 12:01:42

$(document).ready(function() { 
    $("#list3 li").click(function() { 
    $("#list3 li.clicked").toggleClass("clicked"); 
    // if you don't want to be able to deselect the li that is already selected 
    // add this 
    // if (!$(this).hasClass("clicked")) { 
     $(this).toggleClass("clicked"); 
    // } 
}); 
});

et règle de style CSS:

.clicked { 
    border: 3px solid red; 
    ... extra customization 
}

Source

2012-03-22 12:02:25

il fonctionne bien .. je l'ai essayé pour mouseover comme $ ("# liste3 li"). Mouseover (fonction() { $ ("# liste3 li.mouseover"). ToggleClass ("mouseover"); $ (ceci).toggleClass ("mouseover"); }); – bala3569

.mouseover { bordure: 3px bleu uni; il fonctionne également mais quand je laisse la souris de list1 à list2..le dernier élément de mouseover li a cette frontière. Comment enlever cette frontière en passant d'une liste à une autre liste – bala3569

@ bala3569 vous devez manipuler l'événement mouseout également –

Cela devrait fonctionner

$(document).ready(function() { 
     $("#list3 li").click(function() { 
      $("list3 li.clicked").css("border","0"); 
      $("list3 li.clicked").removeClass("clicked"); 
      $(this).addClass("clicked"); 
      $(".clicked").css("border", "3px solid red"); 

     }); 
    });

Vous pouvez mettre la propriété border dans la classe .clicked elle-même.

Source

2012-03-22 12:02:28 vivek

La ligne:

$(".clicked").css("border", "3px solid red");

ne met pas le style de « cliqué » il ne change que le style de l'élément sélectionné (s) à savoir $(this).

Vous feriez mieux d'ajouter une règle css pour .clicked:

.clicked { 
    border: 3px soild red; 
}

et retrait de la ligne originale de votre javascript ainsi:

$(document).ready(function() { 
    $("#list3 li").click(function() { 
     $("list3 li.clicked").removeClass("clicked"); 
     $(this).addClass("clicked"); 
    }); 
});

Ensuite, les changements de style se passera automatiquement à l'aide fonctions addClass() et removeClass().

Source

2012-03-22 12:05:42 phuzi

Comment sélectionner et désélectionner un élément li en utilisant jquery?

Répondre

Questions connexes