jqueryを使用して実装されたCSSの問題

入力の title 属性を "field_title" クラスにまたがるように変換するjqueryを作成しました。私は入力をクリックしたときにspan class hideを押しても入力フィールドは無効のままです。問題は、入力フィールドを有効にできないことです。

<div class="field">
  <input type="text" name="email" class="w_def_text" title="Email*" />
  Error 
</div>

<script>
function init_fields() {    
    $('.w_def_text').each(function() {
        var text = $(this).attr('title');
        var html = '' + text + '';
        $(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>
1
@ swatkins:まさに私が電子メール*をクリックすると、ここに入力フィールドが必要なスパンです...
追加された 著者 Rahul Singh,
あなたが望むものを解読するのが難しい。このフィディー( jsfiddle.net/VwPM2 )を使って作業したり、これを使用して少しだけ。
追加された 著者 swatkins,
私は正確に何が問題なのかよく分かりませんが、タイトルのスパンではなくラベルタグを使用することで、ある程度解決できると思います。さらにセマンティックは、スタイルなしで意味をなさない。また、クリックすると関連する入力フィールドに焦点を合わせるという利点があります。
追加された 著者 Jerry,

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()などが必要です。今何が間違っているのか理解しておくべきです。 :)

1
追加された
問題ない。ところで、 inputプレースホルダ属性を使用することを検討しましたか?これはHTML5であることに注意してください。
追加された 著者 freakish,
私はビットの変更が欲しい。入力が空の場合には、class = "error"よりもぼやけます。それ以外の場合は読み込み時に非表示にする必要があります。
追加された 著者 Rahul Singh,
やったよ。ありがとう。私はあなたの評判を100にすることはできません。
追加された 著者 Rahul Singh,

私は代わりに考える:

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

あなたはしたい:

$(this).after(html);

また、 .next()。show()の代わりに、より明示的に指定することもできます。ターゲットにする兄弟クラスを指定します。

$(this).next('.error').show()
...
$(this).next('.error').hide()
1
追加された
素晴らしい私は結果のワットを持っていますが、フィールドがnullの場合、私のエラークラスは表示されません。
追加された 著者 Rahul Singh,
これはおそらく $(this).next( '。error')と $(this) .hide()はあなたが望む結果を得るでしょうか?
追加された 著者 Duncan Smart,