quitar - classlist jquery

JQuery addclass a div seleccionado, eliminar clase si se selecciona otro div

Question

Estoy haciendo un formbuilder, me gustaría cambiar la apariencia de, por ejemplo, un encabezado div. Cuando se hace clic, debe obtener un borde, pero cuando se hace clic en otro div generado dinámicamente, la clase debe eliminarse y el segundo div pulsado tiene que obtener la clase .active.

¿Cómo puedo hacer esto con los divs generados?

De todos modos, encontré algo que funciona, pero todavía necesito el Si se selecciona otro div, div.removeclass anterior y div.addclass seleccionado

Esto funciona:

/* 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'');
});
});

Answer 1

¿Estás buscando algo como esto corto y efectivo:

http://jsfiddle.net/XBfMV/

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

simplemente puede agregar una clase general ''activa'' para div seleccionado. cuando se hace clic en un div, elimine la clase ''activa'' y agréguela al div pulsado.

Answer 2

En este modo puedes encontrar todos los elementos que tienen clase activa y eliminarlos

prueba esto

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

Answer 3

Puede usar una sola línea para agregar y eliminar clases en un div. Por favor, elimine una clase primero para agregar una nueva clase.

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

Answer 4

Se trata del selector. Puedes cambiar tu código para que sea algo como esto:

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

Entonces usa este javascript:

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

El ejemplo en un jsfiddle trabajo jsfiddle

Vea esta api sobre el selector que usé: http://api.jquery.com/descendant-selector/

Answer 5

Tuve que transformar los divs para enumerar los elementos; de lo contrario, todos mis divs obtendrían esa clase y solo los generados deberían obtenerla. Gracias a todos, me encanta este sitio y las personas útiles en él. Puedes seguir el proyecto de la escuela para principiantes en http://low-budgetwebservice.be/project/webbuilder.html sugerencias siempre son bienvenidas :). Así que esto funcionó para mí:

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

Answer 6

**This can be achived easily using two different ways:**
1)We can also do this by using addClass and removeClass of Jquery
2)Toggle class of jQuery
**1)First Way**
$(documnet.ready(function(){
$(''#dvId'').click(function(){
$(''#dvId'').removeClass(''active class or your class name which you want to remove'').addClass(''active class or your class name which you want to add'');
});
});
**2) Second Way**
i) Here we need to add the class which we want to show while page get loads.
ii)after clicking on div we we will toggle class i.e. the class is added while loading page gets removed and class which we provide in toggleClss gets added :)
<div id="dvId" class="ActiveClassname ">
</div
$(documnet.ready(function(){
$(''#dvId'').click(function(){
$(''#dvId'').toggleClass(''ActiveClassname InActiveClassName'');
});
});
Enjoy.....:)
If you any doubt free to ask any time...