0

jQuery Validation プラグインを使用するフォームがあります。フォーム フィールドは一連のアコーディオン ボックスにあり、フォーム エラー メッセージは各フィールドの下に表示されます。フィールドが閉じたアコーディオン内にない限り、これは問題なく、アコーディオンにエラーが含まれていることを知る方法はありません。

アコーディオンのタイトルにエラー クラスを適用する方法はありますか? 私は次のようなものを使用できることを知っています

$("#form").validate({
    rules: {
    ...
    },
    highlight: function(element) {
        $(element).closest(".title").addClass("error");
    },
    unhighlight: function(element) {
        $(element).closest(".title").removeClass("error");
    }
});

フィールドのコンテナをターゲットにしますが、この場合は親ではありません。

私のアコーディオン構造は以下の通りです。エラーを生成するフィールドを含む適切な「タイトル」divにエラークラスを適用する必要があります。

<ul class="accordion">
    <li class="active">
        <div class="title panel1">
            Accordion Panel 1
        </div>
        <div class="content">
            ... form fields go here ...
        </div>
    </li>
    <li>
        <div class="title panel2">
            Accordion Panel 2
        </div>
        <div class="content">
            ... more form fields go here ...
        </div>
    </li>
    <li>
        <div class="title panel3">
            Accordion Panel 3
        </div>
        <div class="content">
            ... more form fields go here ...
        </div>
    </li>
</ul>

私もこれを試してみましたが、運が悪かったです：

highlight: function(element) {
    $(element).closest(".title").addClass("error");
},
unhighlight: function(element) {
    $(element).closest(".title").removeClass("error");
}

「タイトル」divをターゲットにする方法はありますか?

4

1 に答える 1

2

ここで、title要素は.content親の前の兄弟です

あなたが使用することができます

$(element).closest(".content").prev('.title').addClass("error");

また

$(element).closest("li").children('.title').addClass("error");
于 2013-09-20T15:45:17.197 に答える