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');
});
});
Cherchez-vous quelque chose comme ceci court et efficace:
$('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é.
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/
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');
});
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');
});
});
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');
});
});