2

ユーザーがイベントに登録したい家族の数を選択できる小さなコンボボックスがあります。しかし、家族が米国市民でない場合は、2 つ目の選択肢を提示したいと思います。要素を動的に追加できますが、市民権フィールドを表示/非表示にする方法がわかりません。

私はjQueryが初めてなので、おそらくこれを間違った方法で行っていますが、フィールドを追加する関数は次のとおりです。

function familySize() {
        while (famElements < $("#famNum").val()) { // add fields
                    addFields = '<div class="member"> Name:&nbsp;<input id="name" type="text" placeholder="Name" required> &nbsp;&nbsp;<input id="cit" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship" type="text" placeholder="Citizenship" required> </div>';
                    document.getElementById('famItems').innerHTML += addFields;
                    famElements++;
                }
        while (famElements > $("#famNum").val()) { // remove fields
            console.log("remove one");
             $('#famItems div:last').remove();
             famElements--;
        }
    }

<div id="famItems">
            </div>

citInfo div の style="display:none" は最初は非表示にしますが、チェックボックスのクリックをキャプチャして市民権テキスト入力を非表示/表示する方法を理解する必要があります。

4

3 に答える 3

3

jQuery のlive関数を使用して、動的に作成されたアイテムのイベントを処理します。

$(function(){
    $('#cit').live('change', citizenInfo());
});
于 2011-05-31T20:04:54.073 に答える
1

jQuery を使用している場合は、代わりにセレクターをgetElementById()使用append()してコンテンツを追加します。

また、同じ ID を持つ 2 つのアイテムを使用しないでください。famElements入力フィールドの ID にカウンターを追加することで、並べ替えることができます。この変更により ID による要素の選択が除外されたため、チェックボックスも class を持つように変更したcitため、簡単なセレクターを使用してイベントをアタッチできます。

クリック イベントの場合は、.live()orを使用できる.delegate()ため、イベントを常にバインドし続ける必要はありません。

function familySize() {
    while (famElements < $("#famNum").val()) { // add fields
        famElements++;
        addFields = '<div class="member"> Name:&nbsp;<input id="name'+famElements+'" type="text" placeholder="Name" required> &nbsp;&nbsp;<input class="cit" id="cit'+famElements+'" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship'+famElements+'" type="text" placeholder="Citizenship" required></div>';
        $('#famItems').append(addFields);
    }
    while (famElements > $("#famNum").val()) { // remove fields
        console.log("remove one");
        $('#famItems div:last').remove();
        famElements--;
    }
}

// Your jQuery ready function
$(function(){
    // Click event on checkboxes
    $('#famItems').delegate('.cit','click',function(){
        var $this = $(this);

            // Show or hide the div
        if($this.is(':checked')){
            $this.parent().find('.citInfo').hide();
        } else {
            $this.parent().find('.citInfo').show();
        }
    });
});

jQuery を使用すると、要素をよりエレガントに構築できますが、必要なことは実行されます。ただし、HTML にテキストを追加して、その大きなテキストのかたまりが謎に包まれすぎた場合に備えて、そうすることを検討するかもしれません。

于 2011-05-31T20:17:55.800 に答える
-1

試行錯誤の末、ようやく思いつきました。「member」divと「citInfo」divの両方を別のdivで囲み、チェックボックスの定義を次のように変更すると:

<input class="cit" onChange="citizenInfo(this)" type="checkbox">

次に、必要なのはこの関数だけです:

function citizenInfo(chkBox) {
 $(chkBox).parent().parent().find('.citInfo').toggle();
}
于 2011-06-08T20:36:04.727 に答える