1

別の「idVerification」への変更に基づいて、1 つのフォーム フィールド「idSerialNo」の状態を変更しようとしていますが、ページに 3 つのフォームがあるため、正しい要素にアクセスするのが困難です。

各 for の関連セクションは次のようになります。

// Input 1, a select element
<div id="sigIDVerification_field" class="clearfix  ">
    <label for="sigIDVerification"> … </label>
    <div class="input">
        <select id="sigIDVerification" class="span5 selectpicker sortable idVerification" name="sigIDVerification" style="display: none;"> … </select>
        <div class="btn-group bootstrap-select span5 sortable idVerification"> … </div>
        <span class="help-inline"></span>
        <span class="help-block"></span>
    </div>
</div>
// Input 2, a text input
<div id="sigIDSerialNo_field" class="clearfix  ">
    <label for="sigIDSerialNo"> … </label>
    <div class="input">
        <input id="sigIDSerialNo" class="span5 idSerialNo" type="text" value="" name="sigIDSerialNo"></input>
        <span class="help-inline"></span>
        <span class="help-block"></span>
    </div>
</div>

select 要素のラッピングは、カスタム スキンによるものであることに注意してください。

select.idVerification3 つのフォームのそれぞれの要素のイベント リスナーを登録しようとしています。select 要素が変更されたときに、それがデフォルト値かどうかを確認したい場合は、div ブロック (ここではdiv#sigIDSerialNo_field) を非表示にして、値をinput.idSerialNoto に設定します""。select 要素の値がデフォルトでない場合は unhidediv#sigIDSerialNo_fieldになり、非表示の場合は unhide になります。私の問題は、表示/非表示にする各 div の ID が異なり、制御できないことです。

私がやりたいのは.idSerialNo、この後の次の出現を選択することであり、要素.idVerificationの祖父母を取得できます。.idSerialNoただし、.next()直接の兄弟でのみ機能することがわかったので、使用できません。

私の目標を達成する方法はありますか？

4

3 に答える 3

1

.idSerialNo次のように、同じ形式で次へ進むことができます。

// assume item is jQuery object pointing to your current .idSerialNo
var nextSerialNo = item.closest("div.clearfix").next().find(".idSerialNo");

これは、現在の の祖父母を見つけ、現在.idSerialNoのフォームと同じレベルにある HTML の次の div を見つけ、.idSerialNoその div でオブジェクトを見つけます。

"div.clearfix"このコードは、セレクターが常に適切な親を識別することを前提としています。そうでない場合は、その親に一貫してより良いクラスを配置するか、すべての HTML で機能するロジックで適切な親オブジェクトを見つけるためのコードをさらに記述する必要があります。すべての HTML を開示していないため、どこでも機能しない場合にどのパターンが機能するかを実際に特定することはできません"div.clearfix"。

このナビゲーションの鍵は、階層を右の親に移動し、.next()そこから右の親で使用.find()することです。

于 2013-09-10T14:53:32.883 に答える
1

イベントリスナーを追加して、選択したアイテムがデフォルトであるかどうかを確認し（最初の要素-インデックス0であると想定しました）div.clearfix、最も近いdiv.clearfixクラスの兄弟を非表示にし、兄弟の入力をクリアします。

更新されたデモを確認してください。を使用すると、 のnext()間に要素がないと仮定されdivます。siblings()の間に他の要素があっても機能することを確認するために、に変更しましたdiv。

デモ 

$(function () {
    $("select.idVerification").change(function () {

        var divToHide = $(this).closest("div.clearfix").siblings("div.clearfix");

        if ($(this)[0].selectedIndex == 0) {
            // clear input
            divToHide.find(".idSerialNo").val("");
            // hide
            divToHide.hide();

        } else {
            // show 
            divToHide.show();
        }
    });
});
于 2013-09-10T15:37:28.013 に答える
0

jfriend00 と Lobo の回答に基づいて、次の解決策を決定しました。

var idVerification = $("select.idVerification");

idVerification.each(function() {
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next();
    nextIDSerialNo_field.addClass('hidden');
    nextIDSerialNo_field.hide(0);
});

idVerification.change(function() {

    var nextIDSerialNo = $(this).closest("div.clearfix").next().find(".idSerialNo");
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next();

    if($(this).val() === "NONE"){
        nextIDSerialNo_field.hide('slow');
        nextIDSerialNo_field.addClass("hidden");
        nextIDSerialNo.val("");
    } else {
        nextIDSerialNo_field.removeClass("hidden");
        nextIDSerialNo_field.show("slow");
    }
});
于 2013-09-10T16:23:12.977 に答える