0

私の HTML ページには、いくつかのフォームがあります。

それらはすべて次のパターンに従います。

  1. 各フォームは div と呼ばれる"form-optional"
  2. この DIV 内にはチェックボックスがあり、クラスにラップされています。"form-enable"
  3. 実際のフォームのクラスは"form-main".

ユーザーがチェックボックスをクリックすると、「フォームメイン」が非表示になるように、Jqueryを使用したい。ただし、クリックされたチェックボックスと同じ "form-optional" div に属するフォームのみを非表示にする必要があります。他のすべてのフォームは変更しないでください。

Jquery コマンド.parent()を使用してクラスの親を見つけ、それをfind()と組み合わせてその parent() 内の特定のクラスを見つけることができることを私は知っています。ただし、これらのコマンドを使用すると、機能しないようです。

JSFIDDLEはこちら

これが私のJqueryです：

// JavaScript Document
(function($)
{


$(document).ready(function(){

    $(".form-optional .form-enable input").click(function(){


        if(($this).attr('checked')){

            $(this).parent().find('.form-main').fadeIn();
        }

        else
        {
            $(this).parent().find('.form-main').fadeOut();
        }
    });
    });


})(jQuery);

ここに私のHTMLがあります：

<div class="form-optional">
    <p class="form-enable">
        <input name="personaldetails" type="checkbox" value="">No Personal Details
    </p>
    <p class="form-explanation">If this product is a gift, you can tick the box, to omit the personal details</p>


    <form name="frmPersonal" class="form-main">

        Name:
        <input type="text" name="ordPersonalInfo1" value="" onkeyup="Restrict_Chars(this.form.ordPersonalInfo1,30);">

    </form>

</div>



<div class="form-optional">
    <p class="form-enable">
        <input name="friendsdetails" type="checkbox" value="">No Friends Details
    </p>
    <p class="form-explanation">If you have no friends, you can tick the box to omit friends</p>


    <form name="frmPersonal" class="form-main">

        Name:
        <input type="text" name="ordPersonalInfo1" value="" onkeyup="Restrict_Chars(this.form.ordPersonalInfo1,30);">

    </form>

</div>
4

5 に答える 5

1

を使用します.parents()が、セレクターを指定します。

これを試して：

var enableInput = function()
{
    var checkbox = $("input[type='checkbox']");

    checkbox.click(function(){
        if ($(this).is(":checked")) {
            $(this).parents(".form-optional").find(".form-main").fadeIn();
        } else {
            $(this).parents(".form-optional").find(".form-main").fadeOut();
        }
    });
}
enableInput();

JSFiddle の例。

于 2013-10-24T10:32:38.430 に答える
1

form-main親要素の子孫ではなく、チェックボックス要素の親の兄弟であるためです。したがって、マークアップに基づいて考えられる解決策の 1 つは、 form-optional要素を見つけてから、そのform-main中の を見つけることです。

jQuery(function ($) {
    $(".form-optional .form-enable input").change(function () {
        if (this.checked) {
            $(this).closest('.form-optional').find('.form-main').fadeIn();
        } else {
            $(this).closest('.form-optional').find('.form-main').fadeOut();
        }
    }).change();
});

デモ:フィドル

于 2013-10-24T10:26:08.333 に答える
0

.next()を使用します。

一連の DOM 要素を表す jQuery オブジェクトを 指定すると、この.next()メソッドを使用して、DOM ツリー内のこれらの要素の直後の兄弟を検索し、一致する要素から新しい jQuery オブジェクトを構築できます。

于 2013-10-24T10:19:58.627 に答える