Jquery addClass pas une fonction

Question

Ce que je veux:

Je veux faire un formulaire où je montre différents champs d'entrée en fonction du type de contact (l'utilisateur peut choisir le type de contact à partir d'un menu déroulant). J'ai essayé avec jQuery, mais j'ai deux erreurs avec elle.

Comment j'ai essayé:

function showContact() { 
/* */ 
    $('#userType').change(function(){ 
     var value = $(this).val(); 

     console.log(value); 
     var member = document.getElementById("private"); 
     var corporation = document.getElementById("corporation"); 

     if (value == 1) { 
      member.removeClass('hidden'); 
      corporation.removeClass('hidden').addClass('hidden'); 

      return; 
     } else if (value == 2) { 
      member.removeClass('hidden').addClass('hidden'); 
      corporation.removeClass('hidden'); 

      return; 
     } else { 
      member.removeClass('hidden').addClass('hidden'); 
      corporation.removeClass('hidden').addClass('hidden'); 

      return; 
     } 
    }); 
} 

Quelle est l'erreur:

1: Le script ne démarre que sur le deuxième changement de menu déroulant. Je veux commencer au premier changement.

2: Quand je change je suis arrivé cette erreur:

TypeError: member.removeClass is not a function

Quel est le problème?

Answer 1

En supposant que tout le reste fonctionne. Changement:

var member = document.getElementById("private"); 

à

var member = $("#private"); 

Answer 2

Le problème que vous rencontrez est que vous mélangez jQuery avec Javasript régulière, et il est que si vous utilisez jQuery que vous pouvez utiliser removeClass sur un objet comme vous essayons de faire.

Une autre chose est qu'il ne peut pas trouver:

var member = document.getElementById("private"); 

Il ne trouve pas le « privé » dans d'autres membres mots ne soit pas créé.

Ceci est lié au signe #, qui en fait un identifiant. Un . est une classe et un # est un ID.

Si privé est un identifiant, vous faites ceci:

var member = document.getElementById("#private"); 

Answer 3

1: The script only starts on the second dropdown change. I want to start at the first change.

Cela dépendra de la façon dont showContact est invoquée. C'est difficile à dire sans connaître cette information. Notez qu'il ne doit être invoqué qu'une seule fois, probablement lorsque le DOM a été chargé, puisqu'il lie un gestionnaire d'événements.

2: When I change I got this error:

TypeError: member.removeClass is not a function 

member, un noeud de DOM, n'a pas une méthode removeClass. Pour résoudre ce problème, vous pouvez faire l'un des deux:

• member.classList.remove("hidden")(utilise l'API native)
• $(member).removeClass("hidden")(crée un objet jQuery, et utilise l'API de jQuery)

En outre, chaque appel supprime d'abord la classe hidden, puis l'ajoute à nouveau. Cela semble n'avoir aucun effet à la fin.

// What has been gained here? 
$(member).removeClass('hidden').addClass('hidden'); 

Si vous espériez faire en sorte que la classe ne serait pas dupliqué sur l'élément, vous ne devez pas vous inquiéter. L'API native et jQuery empêcheront cela.

Answer 4

Parce que corporation est un élément DOM, pas un nœud jQuery, et que vous essayez d'utiliser une fonction jQuery sur celui-ci. Enveloppez-le dans un sélecteur jQuery comme $(corporation)

jsFiddle example