输入字段未显示

时间:2011-10-27 03:26:12

标签: jquery css

我正在尝试水平对齐特定input中的imgdiv元素。我已为input元素提供了display:block的CSS属性,但我的Firebug将其显示属性显示为none

关于CSS

.block_feedback .field input {
    color: #FFF;
    width:375px;
    height:17px; line-height:17px;
    margin-left:15px; margin-top:6px;
    display:block;
    background-color:transparent;
    border:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    float:left; 
 }
.block_feedback .field img { 
    color:#F00; 
    width:27px;
    height:27px; line-height:25px;
    margin-left:405px; margin-top:0px;
    display:block;
    background-color:transparent; 
    border:0px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:16px;
    font-weight:bold; 
    font-weight:bold;
    float:left;
 }

HTML

<div class="field">
    <input type="text" name="name" class="w_def_text" title="Name*" />
    <img width="27" height="27" src="images/error.jpg" alt="Error"> 
</div>

Firebug显示为

 <input class="w_def_text" type="password" title="Password*" name="password" style="display: none;">jQuery1510542302776850034=Object { olddisplay="block"}
 <img width="27" height="27" alt="Error" src="images/error.jpg" style="display: block;">
 <span style="display: none;">Password*</span>jQuery1510542302776850034=Object { olddisplay="block"}

的jQuery

function init_fields() {
$('.w_def_text').each(function() {
    var text = $(this).attr('title');
    var html = '<span>' + text + '</span>';
    $(this).parent().append(html);

    if($(this).val() == '') {
        $(this).hide();
        $(this).next().show();
    }
    else {
        $(this).css({'display' : 'block'});
        $(this).next().hide();
    }
});

$('.w_def_text').live('blur', function() {
    if($(this).val() == '') {
        $(this).hide();
        $(this).next().show();
    }
});

$('.w_def_text ~ span').live('click', function() {
    $(this).hide();
    $(this).prev().css({'display' : 'block'}).focus();
});
}

1 个答案:

答案 0 :(得分:0)

我不确定你要实现的目标,但根据你的问题标题和简要说明,似乎你根本不知道为什么你的输入元素被隐藏或为什么它是display: none in萤火。

很明显,display: none方法将jQuery代码中的.hide()更改为.hide()

根据jQuery documention

  

没有参数,$('.target').hide();方法是隐藏元素的最简单方法:

     

.css('display', 'none')

     

匹配的元素将是   立即隐藏,没有动画。 这大致相当于   致电.hide()

如果没有看到HTML标记的其余部分或了解脚本的用途,就无法说出包含{{1}}的哪一行导致它。只需禁用您的JavaScript,就可以证明jQuery代码是根本原因。