0

soy nuevo en esto y es mi primer mensaje, espero hacerlo bien.

Tengo un DIV con fondo blanco el cual al hacer click sobre él, su fondo cambia de color a rojo, ademas de que aparece un mensaje preguntando al usuario que acción desea realizar. Bien, lo que yo quiero es que mientras este en pantalla el mensaje, el fondo del DIV se mantenga en rojo, y cuando salga de esta pantalla dándole a Cancelar, regrese a blanco. Cabe mencionar que el mensaje que aparece lo hago con un plugin de Jquery que se llama jqueryconfirm.

En primera instancia ya habia logrado lo que queria, mi problema es porque al hacer click por segunda ocasión, ya no cambia de color el fondo de mi DIV, y no entiendo por que. A ver si alguien me puede ayudar.

Este es el codigo:

$('.clave').on('click',function(){ 

    $(this).addClass('fondo_rojo');
    var valorclick = $(this).val();
    var elemento = $(this)[0]; 

    $.confirm({
        theme: 'material',
        title:'Atencion',
        content:'¿Que desea hacer?',
        useBootstrap: false,
        boxWidth: '350px',
        buttons:{
            Borrar: function(){
                $.confirm({
                    title:'Atencion',
                    content:'¿Esta seguro de continuar y borrar el registro?',
                    useBootstrap: false,
                    boxWidth:'300px',
                    buttons:{
                        Adelante: function(){funcionBorrar(valorclick)},
                        Cancelar: function(){}
                    }
                });
            },
            Editar: function(){ funcionConsultarRegistro(valorclick) },
            Cancelar: function(){ quitarFondo(elemento) }
        }
    });

});    

function quitarFondo(elemento){
    $(elemento).addClass('fondo_blanco');
}

3 respuestas 3

0

Dependiendo del orden en que aparezcan tus selectores en tu css, unos tienen prioridad sobre otros.

En tu caso, cuando abres el diálogo le das al elemento la clase fondo_rojo

$(this).addClass('fondo_rojo');

Y luego se la quitas asignándole fondo blanco

function quitarFondo(elemento){
    $(elemento).addClass('fondo_blanco');
}

Al final de este proceso tu elemento tiene las dos clases, .fondo_blancoy .fondo_rojo. Añadirle cualquiera de las dos clases con el método addClass ya no tendrá efecto.

Como te decía al comienzo, dependiendo del orden (y especificidad) de tus selectores CSS, unos tienen prioridad sobre otros. En este caso parece que .fondo_blanco se impone a .fondo_rojo a la hora de fijar el color de fondo.

Solución: quita una clase antes de añadir la otra

$(this).removeClass('fondo_blanco').addClass('fondo_rojo');

y

function quitarFondo(elemento){
    $(elemento).removeClass('fondo_rojo').addClass('fondo_blanco');
}
1
  • Tu solución me ha funcionado perfectamente, muchas gracias. Commented el 17 mar. 2017 a las 15:54
0

Te recomiendo leer detenidamente la documentación, al estar basado en jquery lo mas lógico es que pueda aplicar el modal a un elemento y no tengas que lanzar tu el modal, así mismo lo primero que debes buscar al usar una librería como esta son los callbacks.

Getting-started

Callbacks

Te agrego un ejemplo:

  jQuery(document).ready(function() {

    $(this).addClass('fondo_rojo');
    var valorclick = $(this).val();
    var elemento = $(this)[0]; 

    $(".clave").confirm({
        theme: 'material',
        title:'Atencion',
        content:'¿Que desea hacer?',
        useBootstrap: false,
        boxWidth: '350px',
        buttons:{
            Borrar: function(){
                $.confirm({
                    title:'Atencion',
                    content:'¿Esta seguro de continuar y borrar el registro?',
                    useBootstrap: false,
                    boxWidth:'300px'
                });
            },
            Editar: function(){ funcionConsultarRegistro(valorclick) },
            Cancelar: function(){ 
	            var elemento = this.$target[0];
	        	elemento.classList.toggle("active");
        	}
        },onOpenBefore: function () {
        	var elemento = this.$target[0];
        	elemento.classList.toggle("active");
    }
});    

        });
.active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.1/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.1/jquery-confirm.min.js"></script>

<div class="clave" style="height: 100px; border: 1px solid red;"></div>

0

La razón es simple:

Cuando añades una segunda clase que tiene las mismas reglas, o un subconjunto de ellas que la primera clase, primero debes eliminar esta ya que simplemente habrá un conflicto entre ellas. Siempre prevalecerá la clase que es definida después en el archivo CSS.

A no ser que definas la prioridad en alguna de ellas mediante !important, esto siempre será así. La solución es de lo más simple: eliminar la clase actual antes de agregar una nueva.

function quitarFondo(elemento) {
  $(elemento)
    .removeClass('fondo_rojo')
    .addClass('fondo_blanco');
}

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.