使用 Jquery each() 和 children() 遍历和隐藏/聚焦表单元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8088343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jquery each() and children() to traverse and hide/focus form elements
提问by Throttlehead
I'm trying to write a simple script that emulates placeholders so that I can use the effect on all browsers. What I set up is a form with a span with some text in it that I absolutely position over the input. This acts like the placeholder text.
我正在尝试编写一个模拟占位符的简单脚本，以便我可以在所有浏览器上使用该效果。我设置的是一个带有跨度的表单，其中包含一些我绝对定位在输入上的文本。这就像占位符文本。
Now the Jquery is easy enough, and if I write out individual functions for each input element I get it to work fine, but that's kind of redundant. What I'm trying to do is use each() and children() and the classes so that I can apply this to any form I want. Here's the code:
现在 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>
If I put an alert statement within the each function, it works, but it's not performing the rest of it which is to hide the child class '.inputText' and focus on the other child '.input' I'm guessing it has something to do with not being able to call $(this) again once inside a function. Anyone have any ideas on how I can get this to work?
如果我在 each 函数中放置一个警报语句，它会起作用，但它不会执行其余部分，即隐藏子类 '.inputText' 并专注于另一个子类 '.input' 我猜它有一些东西与无法在函数内部再次调用 $(this) 有关。任何人都对我如何让它发挥作用有任何想法？
Solved!!! Thanks MattHere's the final working code with the function to put placeholder text back in place if input is left blank.
解决了！！！谢谢马特这是最终的工作代码，其中包含在输入为空时将占位符文本放回原位的功能。
<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>
回答by Mark Brown
Untested, but I believe you're having a scope issue related to $(this)
未经测试，但我相信您遇到了与 $(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();
});
});
回答by James Johnson
Using your code...
使用您的代码...
$(function() {
$(".inputSpan").each(function() {
$(this).children(".inputText").click(function() {
$(this).hide();
$(this).siblings(".input").focus();
});
});
});
Here's a jsFiddle: http://jsfiddle.net/hNXaF/
这是一个 jsFiddle：http: //jsfiddle.net/hNXaF/
A simpler way...
一个更简单的方法...
$(function() {
$(".inputText").click(function() {
$(this).hide();
$(this).siblings(".input").focus();
});
});
Here's a jsFiddle for this technique: http://jsfiddle.net/R6Vbb/
这是此技术的 jsFiddle：http: //jsfiddle.net/R6Vbb/
回答by zachzurn
Try this:
尝试这个：
<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>
The reason it was not working is because when you used '$(this)' inside of the click function you were referring to the inputText instead of the inputSpan.
它不起作用的原因是因为当您在 click 函数中使用 '$(this)' 时，您指的是 inputText 而不是 inputSpan。
See the jsfiddle here: http://jsfiddle.net/zachzurn/STmmP/
在此处查看 jsfiddle：http: //jsfiddle.net/zachzurn/STmmP/
回答by John Hartsock
You do not need to use jQuery.each(). It is not needed
您不需要使用 jQuery .each()。不需要
$('span.inputSpan > span.inputText').click(function() {
var $this = $(this); //for efficiency
$this.hide();
$this.siblings('input.input').focus();
});
In addition, it would be a good idea to use a tagname with the class selectors for efficiency.
此外，为了提高效率，将标记名与类选择器一起使用是个好主意。
Just using classname like this $('.className')causes an iteration of the entire DOM to find the element. Using tagName in front like this $('span.className')forces jQuery to make use of document.getElementsByTagNamelimiting the number of DOM elements to check.
像这样使用 classname$('.className')会导致整个 DOM 的迭代以找到元素。像这样在前面使用 tagName 会$('span.className')强制 jQuery 使用document.getElementsByTagName限制要检查的 DOM 元素的数量。
回答by Kamil Sindi
Use var $inputSpan = $(this);to refer to the .inputspan
使用var $inputSpan = $(this);来指代.inputspan
$('.inputSpan').each(function() {
var $inputSpan = $(this);
$(this).children('.inputText').click(function(index) {
$inputSpan.children('.inputText').hide();
$inputSpan.children('.input').focus();
});
});
