Jquery onChange exécute cette fonction

Question

J'ai créé une fonction appelée billingOptions() associée à un élément dropdown (select). Lorsqu'un utilisateur sélectionne une option dans la liste déroulante, la fonction est exécutée.

La liste déroulante sera ajoutée dynamiquement à la page ... à chaque fois que vous ajoutez la fonction billingOptions() onChange. J'essaie d'utiliser Jquery pour trouver l'instance la plus proche du class = rate dans la liste déroulante qui a été modifiée. Gardez à l'esprit que les listes déroulantes sont ajoutées dynamiquement afin qu'il puisse y avoir plusieurs instances de .rate ...

J'ai essayé d'utiliser "ceci" et "le plus proche" pour trouver le cours le plus proche (je ne suis même pas sûr que vous peut utiliser une classe avec la fonction la plus proche). Voici le code:

*** on m'a demandé de fournir la structure exacte du HTML (. Les lignes de la table sont générées dynamiquement Le tableau est statique).

<table id="billTasks"> 
<tr> <input class="taskNameInput" type="text" size="52" placeholder="Task Name" name="task:1" disabled="disabled"> <select class="billOptions" onchange="billingOptions(this)"> 
<option class="fixedRate">Bill Fixed Rate</option> 
<option class="hourly">Bill Hourly</option> 
</select> 
<input type="text" name="fixedRate" placeholder="Rate" class="fieldWidth100 rate"/> 
</tr> 
</table> 

function billingOptions(){ 
$(this).closest('.rate').hide(); 
} 

*** EDIT: ce code ne fonctionne pas. Le but est de cacher l'élément input.rate.

Answer 1

Edit: Tout d'abord, vous êtes la moitié droite de votre préoccupation que this n'est pas passé à la fonction. Il est étant passé, mais il n'est pas utilisé. Donnez votre fonction d'un paramètre nommé, et référence au lieu de this:

function billingOptions(el) 
{ 
    $(el).something()... 
} 

est-.rate toujours l'élément suivant? Si oui:

$(el).next(".rate").hide(); 

Est-ce que .rate est toujours un frère? Y aura-t-il un seul .rate frère ou sœur? Si oui:

$(el).siblings(".rate").hide(); 

Will .rate partagent un parent commun avec votre sélection, et être la seule instance de .rate dans ce parent commun? Si oui:

$(el).closest(".commonParentClassName").find(".rate").hide(); 

Si aucune de ces méthodes ne vous convient, veuillez fournir plus de détails sur la structure de votre code HTML.

Modifier: Merci d'avoir posté la structure de votre code HTML. Il vous manque <td> dans votre code HTML. En supposant que votre code réel comprend le <td>, et en supposant qu'il n'y a qu'une seule .rate par ligne, essayez ceci:

function billingOptions(el) 
{ 
    $(el).closest("tr").find(".rate").hide(); 
} 

Answer 2

Vous avez pas vraiment posé une question, autre que fonctionne le plus proche avec une classe, je mis en place ce violon pour vous montrer qu'il fait:

http://jsfiddle.net/JAjFF/

Si vous pouvez nous dire ce qui est la question, avez-vous essayé le code ci-dessus, ça marche? Quel est le problème sinon? Ensuite, je vais modifier ma réponse.

Answer 3

Il est difficile de savoir exactement ce que votre code essaie de faire, mais il y a quelques problèmes avec elle .Premièrement, vous transmettez un élément DOM dans votre fonction, mais votre fonction n'a aucun paramètre déclaré et vous n'accédez pas à l'argument que vous transmettez. En outre, this fait référence à l'objet Window, pas à élément que vous voulez. Changement à cette (en passant dans un argument nommé et en utilisant que la place de this) résoudrait que:

function billingOptions(elem){ 
    $(elem).closest('.rate').hide(); 
} 

Vous pouvez également utiliser la collection arguments au lieu d'utiliser un argument nommé, mais je suggère la méthode ci-dessus au-dessus de ça.

Le problème suivant est que la méthode closest grimpe l'arborescence DOM jusqu'à ce qu'elle trouve le premier élément qui correspond au sélecteur que vous lui transmettez. Dans votre cas, comme this fait référence à l'objet Window, closest ne va pas trouver un ancêtre correspondant à votre sélecteur.

Il est également peu probable que la fonction ci-dessus résoudra ce problème, car d'après l'apparence de votre code, .rate n'est pas un ancêtre de l'élément sélectionné. Je voudrais vraiment plus d'informations sur la façon dont votre HTML est structuré pour vous aider à sélectionner l'élément correct .rate (par exemple, y aura-t-il toujours un seul élément .rate, dans le même conteneur que le select? Si tel est le cas, voici un working example).

Answer 4

Est-ce que le plus proche() fonctionne avec un div? OUI, mais il est pour les éléments ancêtres

Si votre élément .rate est sur le même niveau que votre élément SELECT, vous devez utiliser .siblings()

Si votre élément est .rate dans votre élément SELECT, vous devez utiliser .children()

Si votre élément .rate est juste à l'extérieur de votre élément SELECT, vous devez utiliser .parent()

Si votre élément est .rate plus de quelques niveaux au-dessus de votre élément SELECT , vous devriez alors utiliser. le plus proche() pour trouver le plus proche.

Aussi, votre fonction est bien, vous avez juste besoin de mettre à jour votre sélecteur.