Lier une fonction jquery aux éléments

Question

Je suis très nouveau à jquery et j'ai besoin d'aide. J'essaye de changer un élément de CSS quand j'entre dans une zone de texte. J'ai appliqué une classe css à mes zones de texte et j'ai quelques balises div autour de mes zones de texte.

Lorsqu'un utilisateur sélectionne la zone de texte, je souhaite modifier la balise div souhaitée.

Voici comment le code html semble

<div class="left"> 
    <div class="right"> 
     <input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" /> 
     <span id="rfInput"></span> 
    </div> 
</div> 

mon jquery ressemble à ceci

<script language="javascript" type="text/javascript"> 
    $(function() { 
     $('.myTextBox').focus(function() { 

      $('.box.left').addClass("active"); 
     }).blur(function() { 
      $('.box.left').removeClass("active"); 
     }); 
    }); 
</script> 

Maintenant, le jquery travaille et change la classe sur le focus et le flou mais il affecte tous les éléments witht qu'il classe = "myTextBox" comment puis-je obtenir jquery à attacher à tous les éléments, mais seulement tirer le changement de css dans les textboxes sélectionnés en dehors de la classe des éléments?

Toute aide serait géniale!

Answer 1

<script language="javascript" type="text/javascript"> 
    $(function() { 
     $('.myTextBox').focus(function() { 
      $(this).closest('.left').addClass("active"); 
     }) 
     .blur(function() { 
      $(this).closest('.left').removeClass("active"); 
     }); 
    }); 


</script> 

this fait référence à l'élément qui a reçu l'événement.

Donc, vous enveloppez this dans un objet jQuery, $(this) et accédez à l'ancêtre closest() avec la classe que vous désignez.

.closest()-http://api.jquery.com/closest/

Answer 2

vous étiez pas clair, donc, ici, s je pense ...

$(function() { 
     $('.myTextBox').focus(function() { 

      $(this).closest('.left').addClass("active"); 

     }).blur(function() { 

      $(this).closest('.left').removeClass("active"); 

     }); 
    }); 

Answer 3

Hey palier suivant, Désolé, je ne pouvais pas trouver l'ancien poste ainsi créé une nouvelle et a essayé d'être un peu plus clair ..... évidemment pas :(

<div class="left" id="1"> 
    <div class="right"> 
     <input name="myTextBoxID" type="text" id="myTextBoxID1" class="myTextBox" /><span 
      id="rfInput"></span> 
    </div> 
</div> 
<div class="left" id="2"> 
    <div class="right"> 
     <input name="myTextBoxID2" type="text" id="Text2" class="myTextBox" /><span 
      id="Span1"></span> 
    </div> 
</div> 
<div class="left" id="3"> 
    <div class="right"> 
     <input name="myTextBoxID3" type="text" id="Text3" class="myTextBox" /><span 
      id="Span2"></span> 
    </div> 
</div> 

Ok Alors disons que j'ai 3 balises div avec le class = "left" à l'intérieur J'ai ma zone de texte Quand je me focalise à l'intérieur disons par exemple myTextBoxID1 Je veux que le CSS de son parent div id = "1" change de gauche à gauche Je ne veux pas que d'autres éléments changent

L'espoir qui fait un peu plus de sens