JQuery yordamida CSS yordamida muammo

"title_title" kodi bilan kirish uchun title atributini o'zgartiradigan jQuery yaratdim. kirishni bosganimda, span-sinf yashirishni xohlayman, lekin kirish maydoni o'chirilgan bo'ladi. Muammo men kirish maydonini faollashtira olmayman.

<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: To'liq men Emailga bosganimda * bu erda kirish maydonini istayman ...
qo'shib qo'ydi muallif Rahul Singh, manba
O'zingiz xohlagan narsalarni tushunish juda qiyin. Biz bilan ishlash uchun ko'proq narsani bera olasizmi yoki bu fiddleni ishlatishimiz mumkin ( jsfiddle.net/VwPM2 ). bir oz ko'proq.
qo'shib qo'ydi muallif swatkins, manba
Men aniq nima degani emasligiga amin emasman, lekin unda nom uchun spans o'rniga yorliqli teglardan foydalangan holda, u muayyan darajada hal qilinishi mumkin deb o'ylayman. Bundan tashqari, semantik ham, uslubsiz uslubga ega. Bundan tashqari, tıklandığında bilan bog'liq kirish maydoniga odaklanılması uchun qo'shimcha foyda bor.
qo'shib qo'ydi muallif Jerry, manba

2 javoblar

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

Oldindan kirishingiz kerak bo'lgan .prev (). Oldingi() kodini kiriting. Va ikkinchi vazifada

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

.next (), keyingi() yoki shunga o'xshash narsa kerakli narsaga bog'liq. Siz hozir nima yomon ekanini tushunishingiz kerak. :)

1
qo'shib qo'ydi
Muammo yo'q. Aytgancha: kirish da joyholder xususiyati ishlatilganmi? Bu HTML5 deb e'tibor bering.
qo'shib qo'ydi muallif freakish, manba
Bir oz o'zgartirishni xohlayman. agar kirish bo'sh bo'lsa, bulaniqda = "xato" ko'rinishi kerak. aks holda yuklashda maxfiy bo'lishi kerak.
qo'shib qo'ydi muallif Rahul Singh, manba
Men buni bajardim. Tashakkur. Men sizning obro'ingizni qila olmayman +100, aks holda men buni qildim .... :)
qo'shib qo'ydi muallif Rahul Singh, manba

O'ylaymanki:

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

qilishni xohlasangiz:

$(this).after(html);

.next() o'rniga aniqroq bo'lishi mumkin. Show() - maqsadga erishmoqchi bo'lgan birodarlik sinfini ko'rsating:

$(this).next('.error').show()
...
$(this).next('.error').hide()
1
qo'shib qo'ydi
Katta natija berdim, ammo hanuzgacha loyqa holatlarda maydon bo'sh bo'lganda xato sinfi ko'rsatilmaydi.
qo'shib qo'ydi muallif Rahul Singh, manba
$ (this) .next (". Error") so'zini tushunish juda qiyin, show() va $ (this) .next (". Error") .hide() sizga kerakli natijani beradi.
qo'shib qo'ydi muallif Duncan Smart, manba