web-dev-qa-db-fra.com

Comment basculer un élément sélectionné en surbrillance dans une liste de groupe

J'ai ceci en utilisant Bootstrap:

    <ul class="list-group">
        <li  class="list-group-item active">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

La rangée du haut est sélectionnée.

Je veux seulement montrer à la ligne sélectionnée par l'utilisateur 1.

Je peux déclencher un événement lorsque l'utilisateur clique sur une ligne en ajoutant une fonction à un événement Click à l'aide de Javascript.

Je peux ensuite définir cette ligne pour être actif. mais ce qui se passe, c'est que la rangée sélectionnée précédemment doit être désélectionnée.

Quel est le moyen accepté de le faire?

Comment énumérer et accéder à chaque ligne pour modifier ses paramètres de classe?

Existe-t-il un meilleur moyen de faire cela?

ADDITIONAL Toutes ces méthodes fonctionnent (merci à tous) mais si j’ai plus d’un groupe d’options sur ma page, comment puis-je supprimer explicitement la ligne en surbrillance active de celle que j’utilise?

javascripthtml5twitter-bootstrap
13
Andrew Simpson

On y va mon pote. J'ai fait un JSfiddle pour toi

démo

$(function(){
    console.log('ready');

    $('.list-group li').click(function(e) {
        e.preventDefault()

        $that = $(this);

        $that.parent().find('li').removeClass('active');
        $that.addClass('active');
    });
})

JSFiddle mis à jour pour avoir plus d'un groupe

http://jsfiddle.net/mgjk3xk2/1/

19
Sahan

Si vous utilisez jQuery, cela ressemble à ceci:

$(".list-group list-group-item").click(function(e) {
   $(".list-group list-group-item").removeClass("active");
   $(e.target).addClass("active");
});
7
Jevgeni
var $lis = $('.list-group li')
$lis.on('click', function(){
  $lis.removeClass('active')
  $(this).addClass('active')
})
2
Yohn

J'utiliserais javascript pour trouver d'abord le premier élément de votre élément list-group contenant la "classe active", puis supprimer cette classe. Lorsque vous avez terminé, vous pouvez ensuite ajouter la classe active à l'élément sur lequel vous avez cliqué.

Cela peut être fait avec les fonctionnalités .addClass () et .removeClass () de jQuery.

1
Rik_S

juste une autre façon que je pense que c'est une meilleure façon:

$(document).off("click" ,".list-group .list-group-item").on("click" ,".list-group .list-group-item" ,function(){

    $(this).sibbling().removeClass("active");
    $(this).addClass("class");
});
0
Iraj

J'ai fait une solution en utilisant uniquement CSS (pas de JavaScript). Cependant, cela ne fonctionne pas avec les balises HTML <ul> et <li> standard. En d'autres termes, le résultat ressemblera à un groupe de listes Boostrap uniquement dans le style, mais ne sera pas une liste HTML, en termes sémantiques.

Il est dommage que CSS ne possède pas de sélecteur: parent , et le sélecteur: has ne peut pas être utilisé dans les feuilles de style , ce qui nous aiderait à réaliser ce que vous proposez.

Si vous êtes en mesure de négocier du code sémantiquement cassé pour le style que vous désirez, ma solution vous aidera certainement.

Cela revient à cacher un élément <input type="radio" />, mais pas son <label>, puis à utiliser un pseudo-sélecteur CSS afin de faire changer le style de l'élément de liste lorsque le bouton radio est sélectionné.

Le CSS de base serait:

.list-group input[type="radio"] {
  display: none;
}

.list-group input[type="radio"]:checked + .list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

Et le HTML de base serait:

<div class=""list-group>
  <input type="radio" name="RadioInputName" value="Value1" id="Radio1" />
  <label class="list-group-item" for="Radio1">Caption for Radio1</label>
</div>

Voici un CodePen si vous voulez voir le code en action: https://codepen.io/lehonti/pen/OzoXVa

0
Lehonti