Utilizzo di Jquery each() e children() per attraversare e nascondere/mettere a fuoco gli elementi del modulo

Question

Sto provando a scrivere un semplice script che emula i segnaposti in modo che possa utilizzare l'effetto su tutti i browser. Quello che ho creato è un modulo con una span con del testo che ho assolutamente posizionato sopra l'input. Questo agisce come il testo segnaposto.

Ora il Jquery è abbastanza semplice, e se scrivo singole funzioni per ciascun elemento di input, posso farlo funzionare bene, ma è ridondante. Quello che sto cercando di fare è usare each() e children() e le classi in modo che io possa applicare questo a qualsiasi forma che voglio. Ecco il codice:

<form id="signupForm" name="signupForm"> 
    <span class="inputSpan"> 
     <input value="" class="input" name="fistName" id="firstName" type="text" /> 
     <span class="inputText" id="inputText">First name</span> 
    </span> 
    <span class="inputSpan"> 
     <input value="" class="input" name="lastName" id="lastName" type="text" /> 
     <span class="inputText" id="inputText">Last name</span> 
    </span> 
</form> 

<script type="text/javascript"> 
    $('.inputSpan').each(function() { 
     $(this).children('.inputText').click(function(index) { 
      $(this).children('.inputText').hide(); 
      $(this).children('.input').focus(); 
     }); 
    }); 
</script> 

Se metto una relazione d'allarme all'interno ogni funzione, funziona, ma non è di eseguire il resto di esso che è quello di nascondere la classe figlia '.inputText' e mettere a fuoco l'altro bambino '.input' Immagino che abbia qualcosa a che fare con il fatto di non essere in grado di chiamare $ (this) di nuovo una volta all'interno di una funzione. Qualcuno ha qualche idea su come posso farlo funzionare?

Risolto !!! Grazie Matt Ecco il codice di lavoro finale con la funzione per riportare il testo segnaposto sul posto se l'input è lasciato vuoto.

<script type="text/javascript"> 
    $('.inputSpan').each(function() { 
     var $input = $(this) 

     $(this).children('.inputText').click(function(index) { 
      $input.children('.inputText').hide(); 
      $input.children('.input').focus(); 
     }); 
     $(this).children('.input').focusout(function() { 
      if ($input.children('.input').attr('value') == '') { 
       $input.children('.inputText').show();     
      } 
     }); 
    }); 
</script> 

Answer 1

testato, ma credo che stai avendo un problema di portata relativa a $ (this)

$('.inputSpan').each(function() { 
     var $input = $(this) 

     $(this).children('.inputText').click(function(index) { 
      //within this click handler, $(this) refers to the the '.inputText' not '.inputSpan' 
      $input.children('.inputText').hide(); 
      $input.children('.input').focus(); 
     }); 
    }); 

Answer 2

Usa var $inputSpan = $(this); per riferirsi al .inputspan

$('.inputSpan').each(function() { 
     var $inputSpan = $(this); 
     $(this).children('.inputText').click(function(index) { 
      $inputSpan.children('.inputText').hide(); 
      $inputSpan.children('.input').focus(); 
     }); 
    }); 

Answer 3

Utilizzo codice ...

$(function() { 
    $(".inputSpan").each(function() { 
     $(this).children(".inputText").click(function() { 
      $(this).hide(); 
      $(this).siblings(".input").focus(); 
     }); 
    }); 
}); 

Ecco un jsFiddle: http://jsfiddle.net/hNXaF/

Un modo più semplice ...

$(function() { 
    $(".inputText").click(function() { 
     $(this).hide(); 
     $(this).siblings(".input").focus(); 
    });  
}); 

Ecco un jsFiddle per questa tecnica: http://jsfiddle.net/R6Vbb/

Answer 4

Prova questa:

<script type="text/javascript"> 
$('.inputSpan').each(function() { 
var theInput = $(this);  
$(this).children('.inputText').click(function(index) {   
     $(this).children('.inputText').hide(); 
     $(this).children('.input').focus(); 
    }); 
}); 
</script> 

La ragione non funzionava perché quando hai usato "$ (this)" all'interno di funzione di click ti riferivi a inputText invece di inputSpan.

Vedi l'jsfiddle qui: http://jsfiddle.net/zachzurn/STmmP/

Answer 5

Non è necessario utilizzare jQuery .each(). Non è necessario

$('span.inputSpan > span.inputText').click(function() { 
    var $this = $(this); //for efficiency 
    $this.hide(); 
    $this.siblings('input.input').focus(); 
}); 

Inoltre, sarebbe una buona idea di utilizzare un TagName con i selettori di classe di efficienza.

L'utilizzo di un nome classe come questo $('.className') causa un'iterazione dell'intero DOM per trovare l'elemento. L'utilizzo di tagName in primo piano come questo $('span.className') impone a jQuery di utilizzare document.getElementsByTagName limitando il numero di elementi DOM da controllare.