Comment jQuery JavaScript instruction conditionnelle (débutant)

Question

Excuses si c'est une question trop simple, mais mes recherches ne me mènent nulle part.

J'ai une fonction jQuery qui produit une erreur sur certaines de mes pages qui ne contiennent pas l'entrée #message:

Error: jQuery("#message").val() is undefined 
Line: 56 

Et ma fonction jQuery:

function updateCountdown() 
{ 
    var $left = 255 - jQuery('#message').val().length; 

    jQuery('#countdown').text($left + ' Characters Remaining'); 
} 

$(document).ready(function() 
{ 
    updateCountdown(); 

    $('#message').change(updateCountdown); 
    $('#message').keyup(updateCountdown); 
}); 

Donc ma question est, comment puis-je utiliser une condition pour supprimer le message d'erreur des pages sans l'entrée #message? Je crois que mon problème est un manque fondamental de connaissances sur le fonctionnement de JavaScript.

Answer 1

Le seul problème est avec votre code init .. après cela, il fonctionnera bien. Faire ainsi:

$(document).ready(function() 
{ 
    $('#message').change(updateCountdown).keyup(updateCountdown).keyup(); 
}); 

Notez l'utilisation de l'enchaînement.

Answer 2

Améliorez votre sélecteur pour vous assurer qu'il reçoit réellement un élément d'entrée (de sorte qu'il y ait une valeur). Ensuite, vérifiez si votre sélecteur correspond réellement à quelque chose avant de travailler avec. Notez que le length de l'objet jQuery renvoyé est le nombre d'éléments correspondants (il doit être supérieur à 0). Oh, et vous pouvez toujours utiliser la fonction $ tant qu'il n'y a pas de conflits avec d'autres frameworks javascript.

function updateCountdown() 
{ 
    var msg = $('input#message'); 
    if (msg.length > 0) { 
     var $left = 255 - msg.val().length; 

     $('#countdown').text($left + ' Characters Remaining'); 
    } 
} 

Answer 3

Vous avez juste besoin de vérifier si l'objet jQuery contient des éléments. Je le ferais comme ça.

$(document).ready(function() 
{ 
    var $message = jQuery('#message'); 
    if($message.length > 0) { 
     updateCountdown(); 

     $('#message').change(updateCountdown); 
     $('#message').keyup(updateCountdown); 
    } 
}); 

Ensuite, je change votre fonction updateCountdown() d'utiliser le mot-clé this plutôt que de faire une autre recherche jQuery. jQuery définit this comme étant l'élément DOM sur lequel l'événement s'est produit.

function updateCountdown() 
{ 
    var $left = 255 - jQuery(this).val().length; 

    jQuery('#countdown').text($left + ' Characters Remaining'); 
} 

Answer 4

je pas la peine d'effectuer un test explicite sur l'objet jQuery retourné du sélecteur — laisser jQuery faire pour vous!

$(function() { 
    $('#message').each(function() { 
    var $self = $(this); 
    $self.bind('change keyup', function updateCountdown() { 
     $('#countdown').text((255 - $self.val().length)) + ' characters remaining'); 
    }); 
    }); 
}); 

Si « #message » ne correspond pas à quoi que ce soit, l'appel .each(...) ne fera rien.