web-dev-qa-db-fra.com

JQuery addclass au div sélectionné, supprime la classe si un autre div est sélectionné

Je fais un formbuilder, je voudrais changer l'apparence de par exemple un en-tête div . Lorsque vous cliquez dessus, vous obtiendrez une bordure mais lorsque vous cliquerez sur un autre div généré dynamiquement, la classe devrait être supprimée et le second div cliqué a pour obtenir la classe .active.

Comment puis-je faire cela avec les divs générés?

Quoi qu'il en soit, j'ai trouvé quelque chose qui fonctionne mais j'ai toujours besoin de l'option Si un autre div est sélectionnée, div.removeclass et div.addclass ont été sélectionnés.

Cela marche: 

/* Add Class */
$(document).ready(function() {
    $( document ).on( 'click', '.HeadingDiv', function () { /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $('.HeadingDiv').removeClass('active'); /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $(this).addClass('active');
    });
});
jquerycssaddclassremoveclass
22
Auguste

Cherchez-vous quelque chose comme ceci court et efficace:

http://jsfiddle.net/XBfMV/

$('div').on('click',function(){
  $('div').removeClass('active');
  $(this).addClass('active');
});

vous pouvez simplement ajouter une classe générale 'active' pour le div sélectionné. lorsqu'un clic est cliqué sur un div, supprimez la classe 'active' et ajoutez-la au div sur lequel vous avez cliqué.

51
Caner Akdeniz

Tout tourne autour du sélecteur. Vous pouvez changer votre code pour ressembler à ceci:

<div class="formbuilder">
    <div class="active">Heading</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Ensuite, utilisez ce javascript:

$(document).ready(function () {
    $('.formbuilder div').on('click', function () {
        $('.formbuilder div').removeClass('active');
        $(this).addClass('active');
    });
});

L'exemple dans un travail jsfiddle

Voir cette api sur le sélecteur que j'ai utilisé: http://api.jquery.com/descendant-selector/

3
guydog28

Vous pouvez utiliser une seule ligne pour ajouter et supprimer une classe sur un div. Supprimez d'abord une classe pour ajouter une nouvelle classe.

$('div').on('click',function(){
  $('div').removeClass('active').addClass('active');     
});
2
Laxmi Priyam Dubey

Dans ce mode, vous pouvez trouver tous les éléments dont la classe est active et les supprimer.

essaye ça

$(document).ready(function() {
        $(this.attr('id')).click(function () {
           $(document).find('.active').removeClass('active');
           var DivId = $(this).attr('id');
           alert(DivId);
           $(this).addClass('active');
        });
  });
1
Alessandro Minoccheri

Je devais transformer les divs pour lister les éléments sinon tous mes divs auraient cette classe et seuls les générés devraient le recevoir Merci à tous, j'aime ce site et les gens utiles qui y figurent !!!! Vous pouvez suivre le projet d’école pour débutants à http://low-budgetwebservice.be/project/webbuilder.html les suggestions sont toujours les bienvenues :). Donc cela a fonctionné pour moi: 

            /* Add Class Heading*/
            $(document).ready(function() {
            $( document ).on( 'click', 'ul#items li', function () { 
            $('ul#items li').removeClass('active'); 
            $(this).addClass('active');
            });
            });
0
Auguste