0

私の問題は単純明快です。利用規約に同意すると、仕事を完了するのに 3 回のクリックが必要です。ログ情報を選択しているためだと思います。基本的には、名前を入力して同意をクリックしたときに登録ボタンが表示されるようにしたいだけです。

HTMLコードは次のとおりです。

<form id="register-form" name="register-form" method="post" action="register.php">
            <div class="rowbox">
                <label for="username">User Name <strong class="Redstar">*</strong>

                </label>
                <input type="text" id="username" name="username" class="txtbar req" tabindex="1">
                <div class="infobox">Not a valid user name!</div>
            </div>
            <div>
                <p class="checkbox"> <strong class="Redstar">*</strong> I Accept VD Loops <a href="termsconditions.html">Terms & Conditions</a>

                </p>
                <input type="checkbox" id="termscons" name="termscons" class="txtbar" tabindex="12">
                <div class="infobox"></div>
            </div>
            <div class="clear3"></div>
            <div class="registerbtn2">
                <input type="submit" value="Register" id="sendbtn" name="sendbtn">
            </div>
        </form>

JQuery は次のとおりです。

$(document).ready(function () {
// hide send button 
$("#sendbtn").css("display", "none");

$(".txtbar, .txtbox").live("focus click", function () {

    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');
    var pxlchange = '-300px';

    if (currid == "username") {
        pxlchange = '-145px'; }

    rowbox.addClass('colors');

    thelabel.animate({
        left: pxlchange
    }, 350, 'linear', function () {
        // animation complete
    });

    infobox.animate({
        opacity: 1.0
    }, 350, 'linear', function () {
        // animation complete
    });

    $(this).on("change keyup", function () {
        var theval = $(this).val();
        var limitval = 3;
        var checkbox = $('#termscons').is(':checked');
        var replacehtml = "";
        var usernameinfohtml = "Not a valid user name!";

        if (currid == "username") {
            replacehtml = usernameinfohtml;
            limitval = 3; }

        // checking against e-mail regex
        if (currid == "email") {
            if (checkValidEmailAddress(theval)) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (!checkValidEmailAddress(theval)) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        } else {
            // we use this logic to check the name field
            if (theval.length >= limitval) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (theval.length < limitval) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }

            if (currid == "termscons") {
                // we use this logic for the check box
                if ($('#termscons').is(':checked')) {
                    infobox.addClass('good');
                } else {
                    infobox.removeClass('good');
                }
            }
        }

        // check if we can display the send button
        if ($('#username').next().hasClass('good') &&
            $('#termscons').next().hasClass('good')) {

            $("#sendbtn").css("display", "block");
        } else {
            $("#sendbtn").css("display", "none");

        }
    });
});

$(".txtbar, .txtbox").live("blur", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');

    rowbox.removeClass('colors');

    infobox.animate({
        opacity: 0
    }, 400, 'linear', function () {
        // animation complete
    });
});});

ここにJSFiddleがあります

4

1 に答える 1

1

見つけたと思います。

スクリプト内には 2 つのリスナーがあります。

$(this)2番目のものでは、currid最初のクリックから「インポート」するため、チェックボックスをクリックすると、2番目のリスナー$(this).on("change keyup", function () {はまだユーザー名にいると認識します。そして、2 回目のクリックの後でのみ、最初のリスナーがチェックボックスを に割り当てますcurrid。

これを確認して、コンソールを見てください。

于 2013-08-07T07:26:23.100 に答える