1

Tengo un elemento HTML select#options que al seleccionar una de las opciones va agregar clases dinamicamente al elemento div#container, pero necesito eliminar la clase que se agrego anteriormente a este elemento y luego agregar la nueva clase se la opción seleccionada.

Si se dan cuenta, siempre se agregan las clases pero, pero siguen estando las mismas que se agregaron.

$(function(){
  $(document).on('change', 'select#options', function(){
    
    var option_selected = $(this).val();
    $('#container').addClass(option_selected);
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

Agradezco mucho su ayuda.

3 respuestas 3

1

Usando la función removeClassPrefix de esta respuesta en SOen se podría quedar de esta manera:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

$(document).on('change', 'select#options', function(){

    var option_selected = $(this).val();
    
    $('#container').removeClassPrefix('style').addClass(option_selected);   
    
    $('#container').html(option_selected);
    console.log($('#container').attr('class'));    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
	<option value="" selected>Select</option>
	<option value="style1">Style 1</option>
	<option value="style2">Style 2</option>
	<option value="style3">Style 3</option>
	<option value="style4">Style 4</option>
	<option value="style5">Style 5</option>
</select>	

<div id="container" class="container default"></div>

La función elimina todas las clase empezando por el string style que pueda haber y agrega luego el style deseado.

1

Podrias cambiar la linea

$('#container').addClass(option_selected);

por

$('#container').removeClass("style1 style2 style3 style4 style5" ).addClass(option_selected);
1
0

Hola de hecho en cada llamada puedes eliminar "Todas las clases".

$('#container').removeClass();  // sin parametros quita todas las clases

otra opción puede ser:

$('#container').attr('class', '');  // quita todas las clases

Después haces tu .addClass() como siempre.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.