3

フォームが非表示になり、別のフォームが表示されるボタンをクリックすると、ページにフォームがあります。ここでは、jQuery のshow()andhide()ボタンを呼び出し、ボタンのvalueandid属性を変更します。次に、ボタンの新しいid属性を使用して、click()関数を使用します。しかし、残念ながらそれはうまくいきません。

これがフィドルです。

HTML:

<form id="sign_in">
    <table style="margin: 0 auto;">
        <tr>
            <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign In</span>

            </td>
            <tr>
                <td>
                    <input class="input" type="email" placeholder="Username" name="username" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="input" type="password" placeholder="Password" name="password" />
                    <br />
                </td>
            </tr>
            <tr align="right">
                <td>
                    <input class="btn" type="submit" value="Sign In">
                </td>
            </tr>
    </table>
</form>
<form id="sign_up">
    <table style="margin: 0 auto;">
        <tr>
            <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign Up</span>

            </td>
            <tr>
                <td>
                    <input class="input" type="email" placeholder="Username" name="username" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="input" type="password" placeholder="Password" name="password" />
                    <br />
                </td>
            </tr>
            <tr align="right">
                <td>
                    <input class="btn" type="submit" value="Sign In">
                </td>
            </tr>
    </table>
</form>
<br/>
<input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input>

JS:

$(document).ready(function () {
    $("#sign_up_btn").click(function () {
        $("#sign_in").hide("slow");
        $("#sign_up").show("slow");
        $(this).attr("value", "Already have an account?");
        $(this).attr("id", "sign_in_btn");
    });
    $("#sign_in_btn").click(function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
    });
});
4

3 に答える 3

4

クリックイベントをバインドするときに存在しないため、イベント委任を使用する必要があります#sign_in_btn

$(document.body).on('click',"#sign_in_btn",function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
});
于 2013-06-29T20:17:34.197 に答える
1

使用するtoggle()

$(document).ready(function () {
    $("#sign_up_btn").click(function () {
        $("#sign_in, #sign_up").toggle("slow");
        $(this).val(function(_, val) {
            return val == 'Create An Account' ? 'Already have an account?' : 'Create An Account';
        });
    });
});

フィドル

于 2013-06-29T20:19:44.073 に答える
0 
$(document).ready(function () {
    $(document).on('click', "#sign_up_btn",function () {
        $("#sign_in").hide("slow");
        $("#sign_up").show("slow");
        $(this).attr("value", "Already have an account?");
        $(this).attr("id", "sign_in_btn");
    });
    $(document).on('click', "#sign_in_btn", function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
    });
});
于 2013-06-29T20:45:05.833 に答える