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
追加された 編集された
ビュー: 8
源
ro ru fr es pt de zh hi bn ar uz
@ 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, 源