0

セクションに分割された HTML フォームを作成しました。

Jquery を使用して、入力されたセクションに応じて body 要素にクラスを追加しています。

デフォルトでは、本体のクラスはpurchase-stop. すべてのセクションが埋められると、これは に変わりますpurchase-go。

ユーザーが送信ボタンをクリックすると、次のコードを使用してメッセージを表示します。

$("input").on('click', '.purchase-stop', function()
{
    alert("You haven't visited all sections. Please visit them all to ensure you are happy with the choices");
});

問題は、これがpurchase-stopに変更されていても表示されることpurchase-goです。

クラスが の場合にのみ表示するにはどうすればよいpurchase-stopですか?

また、フォームの 2 つのフィールドは必須です。次のコードを使用して、これらの必須セクションが入力されているかどうかを確認します。

$(".changing-room").submit(function(e)
    {
        e.preventDefault();

        var isFormValid = true;
        $("input.required").each(function()
        {
            if ($.trim($(this).val()).length === 0)
            {
                $(this).parent().addClass("error");

                isFormValid = false;
            }
            else
            {
                $(this).parent().removeClass("error");
            }
        });
        if (!isFormValid)
        {
            alert("Some fields are blank (highlighted in red). Please fill them in");
            $('input').blur();
        }

        if (isFormValid)
        {
            $('body').addClass('purchase-active');
            window.scrollTo(0, 0);
        }
        return isFormValid;

    });

purchase-goしかし、繰り返しになりますが、body クラスが(でなく)に設定されている場合にのみ実行したいのですpurchase stop。

Jquery docs によると、Jquery を動的クラスで実行する必要がpurchase-goあります (ロード時の HTML にはありません)。これを行うには、On() functionを使用する必要があります。on 関数は次のように構成されます。

.on("action [e.g. click]", "[trigger element]", function(event)

しかし、トリガー要素を指定しましたが、動作しません。

4

1 に答える 1

1

on()思うようにはいきません。

$("[source].on("[action]", "[trigger element]", function(event)

を使用するonと、要素にバインドされ、内で発生したときにsourceイベントがトリガーされます。actiontrigger elementsource

したがって、あなたの場合、任意purchase-stop の子孫であるクラスをinput持つ要素がclick編集されたときに起動するクリックハンドラーを設定しています。

次のようなことをする必要があります。

$('input[type="submit"]').click(function(e) {
    if ($('body').hasClass('purchase-stop')) {
        alert("You haven't visited all sections. Please visit them all to ensure you are happy with the choices");
    }
});

ただし、ボディにクラス名を使用してフォームが有効かどうかを示すのは少し奇妙です。その機能を検証関数に追加できます。

于 2013-07-17T17:51:39.457 に答える