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*" />
  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
toegevoegd bewerkt
Bekeken: 2
de bron
ro ru fr es pt de hi bn ar uz
@ swatkins: Precies wanneer ik op e-mail * klik die span is, wil ik hier invoerveld ...
toegevoegd 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 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 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
de bron
Geen probleem. Tussen haakjes: hebt u overwogen het kenmerk placeholder te gebruiken in invoer ? Merk op dat dit HTML5 is.
toegevoegd 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 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 de auteur Rahul Singh, de bron

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()
1
toegevoegd
de bron
Geweldig, ik heb resultaat wat ik wil, maar nog steeds onscherp mijn foutklasse wordt niet getoond als veld nul is.
toegevoegd de auteur Rahul Singh, de bron
Het is vrij moeilijk om de vereiste te begrijpen, maar misschien met behulp van $ (this) .next ('. Error'). Show() en $ (this) .next ('. Error') .hide() krijgt het gewenste resultaat?
toegevoegd de auteur Duncan Smart, de bron