Question

我正在尝试编写一个模拟占位符的简单脚本，以便我可以在所有浏览器上使用该效果。我设置的是一个带有跨度的表单，其中包含一些文本，我绝对定位于输入。这类似于占位符文本。

现在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）无关。任何人对我如何使其发挥作用有任何想法？

解决!!!谢谢马特 这是最终的工作代码，如果输入留空，则可以将占位符文本放回原位。

<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

未经测试，但我认为您的范围问题与$（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

使用您的代码......

$(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/

Answer 3

使用var $inputSpan = $(this);来引用.inputspan

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

Answer 4

试试这个：

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

它不起作用的原因是因为当您在click函数中使用'$（this）'时，您指的是inputText而不是inputSpan。

请在此处查看jsfiddle：http://jsfiddle.net/zachzurn/STmmP/

Answer 5

您不需要使用jQuery .each()。不需要

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

此外，为了提高效率，使用带有类选择器的标记名是个好主意。

只需使用类似此$('.className')的类名，就会导致整个DOM的迭代找到元素。像$('span.className')一样使用前面的tagName强制jQuery使用document.getElementsByTagName来限制要检查的DOM元素的数量。

使用Jquery each（）和children（）来遍历和隐藏/聚焦表单元素

5 个答案: