Question

我有像这样的页面布局

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

现在我想首先加载页面时隐藏标签元素。如果失去焦点且值为null，则应显示标签，否则应隐藏标签。我试过这个

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

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

由于

Answer 1

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){
    //...
}):

Answer 2

您应该选择输入或在标签后选择发现它是这样的：$（'#id of input或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>

Answer 3

代码的问题只是标签的选择器。您可以通过将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)

如何查找具有特定属性及其值的标签

3 个答案: