Sử dụng Jquery mỗi() và trẻ em() để di chuyển và ẩn/lấy nét các thành phần biểu mẫu

Question

Tôi đang cố viết một kịch bản đơn giản mô phỏng trình giữ chỗ để tôi có thể sử dụng hiệu ứng trên tất cả các trình duyệt. Những gì tôi thiết lập là một hình thức với một khoảng với một số văn bản trong nó mà tôi hoàn toàn vị trí trên đầu vào. Thao tác này giống như văn bản trình giữ chỗ.

Bây giờ Jquery là dễ dàng, và nếu tôi viết ra các chức năng riêng lẻ cho mỗi yếu tố đầu vào tôi làm cho nó hoạt động tốt, nhưng đó là loại dự phòng. Những gì tôi đang cố gắng làm là sử dụng mỗi() và trẻ em() và các lớp học để tôi có thể áp dụng điều này cho bất kỳ hình thức tôi muốn. Dưới đây là các mã:

<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> 

Nếu tôi đặt một tuyên bố cảnh báo trong mỗi chức năng, nó hoạt động, nhưng nó không phải thực hiện phần còn lại của nó mà là để ẩn các lớp con '.inputText' và tập trung vào đứa trẻ khác '.input' Tôi đoán nó có một cái gì đó để làm với không thể gọi $ (này) một lần nữa một lần bên trong một chức năng. Bất cứ ai có bất kỳ ý tưởng về làm thế nào tôi có thể nhận được điều này để làm việc?

Đã giải quyết !!! Cảm ơn Matt Đây là mã làm việc cuối cùng có chức năng đặt văn bản giữ chỗ lại tại chỗ nếu đầu vào được để trống.

<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

chưa được kiểm tra, nhưng tôi tin rằng bạn đang gặp một vấn đề liên quan đến phạm vi $ (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

Sử dụng var $inputSpan = $(this); để tham khảo các .inputspan

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

Answer 3

Sử dụng của bạn mã ...

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

Dưới đây là một jsFiddle: http://jsfiddle.net/hNXaF/

Một cách đơn giản hơn ...

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

Dưới đây là một jsFiddle cho kỹ thuật này: http://jsfiddle.net/R6Vbb/

Answer 4

Hãy thử điều này:

<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> 

Lý do nó không hoạt động là vì khi bạn sử dụng '$ (this)' bên trong bấm vào chức năng bạn đang đề cập đến inputText thay vì inputSpan.

Xem jsfiddle đây: http://jsfiddle.net/zachzurn/STmmP/

Answer 5

Bạn không cần phải sử dụng jQuery .each(). Nó không cần thiết

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

Ngoài ra, bạn nên sử dụng tên thẻ với bộ chọn lớp để đạt hiệu quả.

Chỉ cần sử dụng tên lớp như thế này $('.className') làm cho một lần lặp lại toàn bộ DOM để tìm phần tử. Sử dụng tagName ở phía trước như thế này $('span.className') buộc jQuery sử dụng số document.getElementsByTagName giới hạn số lượng phần tử DOM cần kiểm tra.