使用jquery each（）和children（）遍歷和隱藏/聚焦表單元素

我正在嘗試編寫一個簡單的腳本來模擬佔位符，以便我可以在所有瀏覽器上使用該效果。我設置的是一個帶有一些文本的表單，我絕對在輸入上定位。這就像佔位符文本一樣。使用jquery each（）和children（）遍歷和隱藏/聚焦表單元素

現在Jquery很簡單，如果我爲每個輸入元素寫出單獨的函數，我可以很好地工作，但這是多餘的。我想要做的是使用each（）和children（）和類，以便我可以將其應用於任何我想要的表單。下面的代碼：

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

如果我把每個函數內的警報語句，它的工作原理，但它不執行它的其餘部分是隱藏子類「.inputText」並專注於其他子'.input'我猜它與一次函數內部不能再次調用$（this）有關。任何人有任何想法，我如何才能得到這個工作？

已解決!!!謝謝Matt 下面是帶有函數的最終工作代碼，用於在輸入空白時將佔位符文本放回原位。

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

來源

2011-11-11 Throttlehead

@Jacob ...使用jQuery。每個（）不需要 –

未經檢驗的，但我相信你有涉及到$（本）

$('.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(); 
     }); 
    });

來源

2011-11-11 00:45:29

是的，這就是我在想，你不能再次調用$（this）一次函數。我不確定這樣的事情是否會起作用，但可惜！謝謝一堆！ – Throttlehead

這是一個很棒的解決佔位符的工作。簡單，乾淨，簡單的解決方案，如果你像我一樣，絕對討厭標籤！ – Throttlehead

jQuery.each（）不是必需的。 –

使用var $inputSpan = $(this);來指代.inputspan

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

來源

2011-11-11 00:43:28 ksindi

對不起，並不意味着編輯你的答案。意思是編輯我的:) –

哈哈沒問題。 – ksindi

jQuery.each（）不是必需的。 –

使用您的一個範圍問題代碼...

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

這裏有一個的jsfiddle：http://jsfiddle.net/hNXaF/

更簡單的方法...

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

這裏有一個的jsfiddle這種技術：http://jsfiddle.net/R6Vbb/

來源

2011-11-11 00:49:49

jQuery.each（）不需要 –

我知道。我只是使用代碼OP張貼:) –

@JohnHartsock：發佈簡化的方法 –

試試這個：

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

原因它不工作是因爲當你使用'$（this）'的時候點擊你所指的inputText而不是inputSpan。

想在這裏看到的jsfiddle：http://jsfiddle.net/zachzurn/STmmP/

來源

2011-11-11 00:51:17 zachzurn

jQuery.each（）是不需要的 –

你不需要使用jQuery .each()。它不需要

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

此外，它是使用標記名與類選擇的效率是個好主意。

只使用像這樣的類名稱$('.className')會導致整個DOM的迭代查找元素。像這樣在前面使用tagName $('span.className')強制jQuery使用document.getElementsByTagName限制要檢查的DOM元素的數量。

來源

2011-11-11 00:53:27

使用jquery each（）和children（）遍歷和隱藏/聚焦表單元素

回答

相關問題