es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La declaración de la función de clic de jQuery evalúa la variable en tiempo de ejecución.

Estoy intentando crear una notificación con CSS y un div en esta respuesta.

Pero necesito más de una notificación, así que serialicé los IDs de los divs.

El problema es que, cuando declaro la función de clic, la variable nname no se evalúa: solo se evalúa cuando presiono el botón de descartar. Por lo tanto, solo se descarta la última notificación.

¿Cómo puedo declarar una función con el valor de la variable nname?

Encontré una publicación similar, pero es sobre zsh.

nc = 0;
function show_notification(data){
    nname = "notification_" + nc
    $('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>');
    $('#' + nname).fadeIn("slow").append('some new information');
    $('#' + nname + ' .dismiss').click(function(){$("#" + nname).fadeOut("slow");});
    nc++;
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Para declarar una función con el valor de la variable ‘nname’, puedes crear un cierre utilizando una función que devuelve otra función. Esto permitirá que la función interna capture el valor actual de ‘nname’ y lo utilice dentro de su ámbito, incluso después de que la función externa haya completado su ejecución.

    Aquí tienes un ejemplo de cómo puedes modificar el código:

    nc = 0;
    
    function show_notification(data) {
      nname = "notification_" + nc;
      $('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a href="#" title="dismiss notification">x</a></span></div>');
    
      $('#' + nname).fadeIn("slow").append('some new information');
    
      $('#' + nname + ' .dismiss').click(function(notificationName) {
        return function() {
          $("#" + notificationName).fadeOut("slow");
        };
      }(nname));
    
      nc++;
    }
    

    En este código modificado, creamos una función que toma el valor de ‘nname’ como parámetro y devuelve otra función que se utilizará como el controlador del evento de clic. Esta función interna tiene acceso a la variable ‘notificationName’, que ha capturado el valor actual de ‘nname’. Invocamos inmediatamente esta función, pasando ‘nname’ como parámetro, y asignamos la función devuelta como el controlador del evento de clic.

    De esta manera, cada notificación tendrá su propio controlador de clic que hace referencia al valor correcto de ‘nname’, y se desvanecerán de forma independiente.

Comments are closed.