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

Question

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

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

<div class="field">
  <input type="text" name="email" class="w_def_text" title="Email*" />
   
</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

追加された 27 10月 2011 〜で 06:49 著者 Rahul Singh 編集された 27 10月 2011 〜で 08:28

ビュー: 10

源

@ swatkins：まさに私が電子メール*をクリックすると、ここに入力フィールドが必要なスパンです...

追加された 27 10月 2011 〜で 07:10, 著者 Rahul Singh, 源

あなたが望むものを解読するのが難しい。このフィディー（ jsfiddle.net/VwPM2 ）を使って作業したり、これを使用して少しだけ。

追加された 27 10月 2011 〜で 07:02, 著者 swatkins, 源

私は正確に何が問題なのかよく分かりませんが、タイトルのスパンではなくラベルタグを使用することで、ある程度解決できると思います。さらにセマンティックは、スタイルなしで意味をなさない。また、クリックすると関連する入力フィールドに焦点を合わせるという利点があります。

追加された 27 10月 2011 〜で 06:54, 著者 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

追加された 27 10月 2011 〜で 08:41 著者 freakish

源

問題ない。ところで、 input にプレースホルダ属性を使用することを検討しましたか？これはHTML5であることに注意してください。

追加された 27 10月 2011 〜で 09:09, 著者 freakish, 源

私はビットの変更が欲しい。入力が空の場合には、class = "error"よりもぼやけます。それ以外の場合は読み込み時に非表示にする必要があります。

追加された 27 10月 2011 〜で 08:51, 著者 Rahul Singh, 源

やったよ。ありがとう。私はあなたの評判を100にすることはできません。

追加された 27 10月 2011 〜で 08:57, 著者 Rahul Singh, 源

著者 Duncan Smart · Answer 1 · 2011-10-27T08:34Z

私は代わりに考える：

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

あなたはしたい：

$(this).after(html);

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

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