0

値が1、2、3、4の選択メニューのあるフォームがあります。3を選択すると、3つのサブdivが表示されますが、1を選択すると、1つだけが表示されます。

ユーザーごとの入力フィールドを保持するいくつかの単純なspandivを作成しました

<span id="ticketuser1">....</span><span id="ticketuser2">....etc

$('#numOfTickets').change(function() {
                var num= $("#numOfTickets").val();

                for (var i=0;i<num;i++){ 
                    if(i>num){
                        $('#ticketuser'+i).hide();
                    } else {
                        $('#ticketuser'+i).show();
                    }
                }

        });

これで、2から3から4になりますが、期待どおりになりますが、小さい数値を選択してもうまくいきません。

任意のヒント？

4

1 に答える 1

2

問題は、非表示条件が終了条件でもあるため、ループが非表示条件に到達しないことです。

$('#numOfTickets').change(function() {
        var num= $("#numOfTickets").val();

        for (var i=0;i<num;i++){ 
            if(i>num){
                $('#ticketuser'+i).hide();
            } else {
                $('#ticketuser'+i).show();
            }
        }

});

2 つのループと、静的または動的な変数が必要です。

私の簡単な例では、静的にすることを選択しました。

var maxUser = 5;

$(function () {
    $('#numOfTickets').change(function () {
        var num = parseInt($(this).val())+1;
        for (var i = 1; i < num; i++) {
            $('#ticketUser' + i).show();            
        }    
        for (var j = num ; j <= maxUser; j++){
            $('#ticketUser' + j).hide();            
        }                                
    });
});

そのため、div が よりも小さいmaxUserが よりも大きい場合num、それが表示されます。

2 番目のループでは、 の上にすべてを隠しますnum。

numループが表示する最後のアイテムを取得するように、値は +1 です。

ここに実用的なフィドルが あります 変数を動的にし、ページの読み込み時に利用可能なオプションに基づいたものにしたい場合は、別の例を次に示します。2 番目の例で変数を初期化するコードを load から簡単に追加しmaxUser、オプションが動的な場合はそれを change 関数に配置できます。

于 2013-02-21T21:27:47.920 に答える