Probleem met CSS geïmplementeerd met jQuery

Question

Probleem met CSS geïmplementeerd met jQuery

Ik heb een jQuery gemaakt om het kenmerk title van de input om te zetten in class "field_title" . wanneer ik op de invoer klik, hoewel de overbruggingsklasse verberg maar het invoerveld blijft uitgeschakeld. Probleem is dat ik het invoerveld niet kan inschakelen.

<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

toegevoegd 27 oktober 2011 op 06:49 de auteur Rahul Singh bewerkt 27 oktober 2011 op 08:28

Bekeken: 2

de bron

@ swatkins: Precies wanneer ik op e-mail * klik die span is, wil ik hier invoerveld ...

toegevoegd 27 oktober 2011 op 07:10, de auteur Rahul Singh, de bron

Te moeilijk om te ontcijferen wat je wilt. Kun je ons meer geven om mee te werken of deze viool te gebruiken ( jsfiddle.net/VwPM2 ) om ons te helpen beetje meer.

toegevoegd 27 oktober 2011 op 07:02, de auteur swatkins, de bron

Ik weet niet precies wat het probleem is, maar ik denk dat het tot op zekere hoogte is opgelost door het gebruik van labeltags in plaats van spaties voor de titel. Ook semantischer, logisch zonder stijl. Hebben ook het extra voordeel dat u de nadruk legt op het bijbehorende invoerveld wanneer erop wordt geklikt.

toegevoegd 27 oktober 2011 op 06:54, de auteur Jerry, de bron

2 antwoord

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

Je hebt .prev (). Vorige() nodig, want dat is de invoer. En in de tweede functie

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

je hebt .next (). next() of iets dergelijks nodig, afhankelijk van wat je wilt. Je zou moeten begrijpen wat er nu aan de hand is. :)

1

toegevoegd 27 oktober 2011 op 08:41 de auteur freakish

de bron

Geen probleem. Tussen haakjes: hebt u overwogen het kenmerk placeholder te gebruiken in invoer ? Merk op dat dit HTML5 is.

toegevoegd 27 oktober 2011 op 09:09, de auteur freakish, de bron

Ik wil een beetje modificatie. op vervaging als invoer leeg is dan class = "fout" moet zichtbaar zijn. anders moet het tijdens het laden worden verborgen.

toegevoegd 27 oktober 2011 op 08:51, de auteur Rahul Singh, de bron

Ik heb het gedaan. Bedankt vriend. Ik kan je reputatie +100 niet maken anders heb ik het zeker gedaan .... :)

toegevoegd 27 oktober 2011 op 08:57, de auteur Rahul Singh, de bron

de auteur Duncan Smart · Answer 1 · 2011-10-27T08:34Z

Ik denk in plaats van:

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

Jij wilt doen:

$(this).after(html);

En misschien explicieter, in plaats van alleen .next (). Show() : geef de zusterklasse op die u wilt targeten:

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