Question

我创建了一个jquery，用于将输入的title属性转换为带有类"field_title"的span。当我点击输入虽然span类隐藏但输入字段保持禁用。问题是我无法启用输入字段。

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

<script>
function init_fields() {    
    $('.w_def_text').each(function() {
        var text = $(this).attr('title');
        var html = '<span class="field_title">' + 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();
    });
}
</script>

Answer 1

我认为不是：

$(this).parent().append(html);

你想做的事：

$(this).after(html);

也许更明确，而不仅仅是.next().show() - 指定你想要定位的兄弟类：

$(this).next('.error').show()
...
$(this).next('.error').hide()

Answer 2

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

您需要.prev().prev()，因为这是输入。并在第二个功能

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

根据您的需要，您需要.next().next()或类似的东西。你应该明白现在的问题。：）

使用jquery实现的CSS问题

2 个答案: