0

現在、ログインボックスに問題があります。オンラインのチュートリアルの背後にあるロジックを使用して、独自のバージョンを使用しています。現在、すべて正常に動作しています。activeログイン ボタンをクリックすると、JQuery トリガーによって、クラスが割り当てられたウィンドウが表示されます。ログイン ボックスが表示されたら、ユーザーはログイン ボックスで [登録] をクリックすると、登録ウィンドウがアクティブになります。私はここに従うのが少し難しいかもしれないことを知っていますが、質問はかなり簡単なはずです. ユーザーを直接REGISTERに移動させる、LOGINの横にある新しいボタンを押したいと思います。そのためには、activeどのボタンを押すかによって、さまざまな形に変化します。どのリンクがクリックされたかを感知し、アクティブ状態をそのフォームに設定するjsスクリプトを作成しようとしています。したがって、最初のコードはリンクです。現在、どちらもサインイン段階でログイン ボックスを開きます。しかし、私の目標は、2 つ目のレジスター ステージを開くことです。これは可能ですか？クリックでアクティブ状態を正しいフォームに設定するにはどうすればよいですか?

ここにjsFiddleがあります

HTML

<li><a href="#login-box" id="signin" class="linkform login-window">Login</a></li>
<li><a href="#login-box" rel="register" class="linkform login-window">Register</a></li>

<div id="login-box" class="login-popup"></div>
<form class="register" >    
    <input type="text" name="login" placeholder="email">
    <input type="password" name='password' placeholder="pass" required> 
    <input type="submit" name="submit" value="Reg">
    <a href="index.html" rel="signin" class="linkform forgot right">login</a>
</form>

<form class="signin active">
    <input type="text" name="login" placeholder="email">
    <input type="password" name='password' placeholder="pass" required>
    <input type="submit" name="submit" value="Login">
    <a href="register.html" rel="register" class="linkform forgot right">Reg</a>
</form>

Javascript

$(function() {
    //the form wrapper (includes all forms)
    var $form_wrapper = $('#login-box'),
        //the current form is the one with class active
        $currentForm = $form_wrapper.children('form.active'),
        //the change form links
        $linkform = $form_wrapper.find('.linkform');

    $linkform.bind('click', function(e) {
        var $link = $(this);
        var target = $link.attr('rel');
        $currentForm.fadeOut(400, function() {
            //remove class active from current form
            $currentForm.removeClass('active');
            //new current form
            $currentForm = $form_wrapper.children('form.' + target);
            //animate the wrapper
            $form_wrapper.stop()
                .animate({
                        height: $currentForm.data('height') + 'px'
                    }, 500, function() {
                        //new form gets class active
                        $currentForm.addClass('active');
                        //show the new form
                        $currentForm.fadeIn(400);
                    });
        });
        e.preventDefault();
    });
});
4

2 に答える 2

1

私はあなたの質問を読み直しました、私はあなたが問題を抱えているところを聞いたと思います

// NOTE: add id="signinForm" and id="registerForm" to your forms, I suggest this over class="signin" and class="register" as you'll only have one signin/register form throughout your app.
// rename rel="register" to id="register", why are you using rel? http://www.w3schools.com/TAGS/att_a_rel.asp
$("#signin").click(function() {
    $("#registerForm").removeClass("active");
    $("#signinForm").addClass("active");
});
$("#register").click(function() {
    $("#signinForm").removeClass("active");
    $("#registerForm").addClass("active");
});

フォームにアクセスして送信するには、送信ボタンに別のクリック イベントを作成します。

 $("input[type=submit]").click(function() {
    var form = $("form.active")[0];
    form.submit();
 });
于 2013-05-21T13:06:58.077 に答える