6

我有这样的页面布局

<input id="name" class="mandotary" type="text">
<label for="name">Name must be entered</label>

<input id="code" class="mandotary" type="text">
<label for="code">Code must be entered</label>

现在我想在第一次加载页面时隐藏标签元素。如果它失去了焦点并且值为空，则应显示标签，否则应隐藏标签。我试过这个

var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){

    var id = $(element).attr("id");
    var label = $("label").attr("for", id);
   // label.hide();

    $(element).focus(function(){
        var next = $(element).next();
        $(element).next().hide();
    }); //end of focus()

    $(element).blur(function(){

        // get value of text area
        var text = $(element).val();
        if (text == "") {
            var next = $(element).next();
            $(element).next().show();
        } //end of if

    }); //end of blur()

}); //end of $(document).ready(fn)

但是线

var label = $("label").attr("for", id);

把两个标签都给我。我只想要那个 for 属性值为 id（名称或代码）的标签。我在var id中获得名称或代码作为id 。但它找到了两个问题。如何找到其 for 属性值等于我的输入元素 ID 的标签？

谢谢

4

3 回答 3

20 
var label = $('label[for="' + id + '"]');
// But it can be done simply with:
var label = $(element).next('label').attr("for", id);

注意事项和最佳附件：

您的代码无缘无故地过度使用 jQuery：

var id = $(element).attr("id");
// Can be simply:
var id = element.id;

您可以通过这种方式使用 jQuery 函数each：

var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){

用于直接元素：

$("input.mandotary").each(function(index, element){
    //...
}):
于 2012-05-02T08:21:50.003 回答
0

您应该在标签之后搜索输入或选择并找到它，如下所示： $('#id of input or select').prev('label'); 例子：

<label for="my_input">Text of label</label>
<input type="text" name="" id="my_input" value="" />
<script type="text/javascript">
    var labelText = $('#my_input').prev('label').html();
</script>
于 2016-04-06T16:01:02.743 回答
-1

您的代码的问题只是标签的选择器。您可以通过将 jQuery 元素“缓存”到封闭的变量中来进一步改进您的代码，而不是在每次调用函数时都运行选择器。

var inputElementArray = $("input.mandotary");
$.each(inputElementArray, function(index, element){

    // the local variables 'label' and 'input' are an enclosed
    // references to the corresponding  INPUT and LABEL jQuery objects

    var input = $(element);
    var label = $("label[for=" + input.attr("id") + "]");

    label.hide();

    input.focus(function() {
        label.hide();
    }); //end of focus()

    input.blur(function(){
        if(!input.val()) { label.show(); }
    }); //end of blur()

}); //end of $(document).ready(fn)
于 2012-05-02T08:36:36.880 回答