0

Webフォームのさまざまな入力のcssクラスが他の入力に依存するように、jQuery関数を体系的に構築しています(つまり、特定の入力に特定の値がある場合、「非表示」クラスが適切な後続の入力から削除されるなど)。

私が使用しているjQueryの具体的な（実際の）例は次のとおりです。

$(document).ready(function(){               
    $("input[name$='q_4']").change(function(){
        if(this.value == 'Yes') {
             $('#qu_5').removeClass('hide');
        } else {
             $('#qu_5').addClass('hide');
        }
    });             
});

この例では、依存する質問 div (#qu_5) は、(name=q_4) のラジオ ボタンを介して入力された値が「はい」であることに依存します。

これらの関数をデータベースを介して動的に構築しているため (ユーザーは質問のプロパティを編集して、これらの種類の表示依存関係を持つようにすることができます)、いくつかの相互依存する入力を含むページにこのコードの複数のチャンクができてしまいます。コードの各チャンクには、マスター質問の名前、スレーブ質問の ID、およびスレーブが明らかにするために依存する値があります。これも意図したとおりに機能します。

ただし、1 つの入力で他の複数の質問が明らかになることもあるため、最終的には次のようなコードになります。

$(document).ready(function(){               
    $("input[name$='q_87']").change(function(){
        if(this.value == 'yes') {
             $('#qu_88').removeClass('hide');
        } else {
             $('#qu_88').addClass('hide');
        }
    });                 

    $("input[name$='q_87']").change(function(){
        if(this.value == 'yes') {
             $('#qu_89').removeClass('hide');
        } else {
             $('#qu_89').addClass('hide');
        }
    });                     
});

これは動作しません。（そして実際に、そのページで動作しているすべての表示/非表示機能を停止します）

jQuery/javascriptがinput[name$='q_87']").change2つの異なる関数を起動する同じイベントに満足していないためだと思いますか? 思いつくのはこれだけです。

機能する方法で私が望むものをどのように達成できるかについて、誰かアドバイスはありますか? ありがとう！:)

4

1 に答える 1

1

var と配列が必要な場合は、次のように記述できます。

var questions = {
  "q_87":["qu_88","qu_89"],
  "q_96":["qu_95","qu_99"]
}


$.each(questions,function(q,arr) {
  $("input[name$='"+q+"']").change(function(){    
    $("'#"+arr.join(",#")+"'").toggleClass('hide',this.value == 'yes'); 
  });
});
于 2013-11-13T14:43:05.243 に答える