0

問題：

ラジオボタンを選択し、テキストフィールドの数値を配列の数値と比較します。trueの場合はアクションを実行せず、そうでない場合はdivを別のdivに切り替えます。

HTMLコード：

<!-- Step 1 - Choose level -->
<label class="control-label">Level:</label>
<label class="radio"><input type="radio" name="level" id="level" value="1">C-level</label> 
<label class="radio"><input type="radio" name="level" id="level" value="2">D-level</label>

<!-- Step 2 - This apply only if choice 1 (C-level) is chosen -->
<label class="control-label">Number of authors:</label>
<label class="radio"><input type="radio" name="authors" id="authors" value="1">1 author</label> 
<label class="radio"><input type="radio" name="authors" id="authors" value="2">2 authors</label>

<!-- Step 2 - This apply only if choice 2 (D-level) is chosen -->
<label class="control-label">Credits:</label>
<label class="radio"><input type="radio" name="credits" id="credits" value="1">15 credits</label> 
<label class="radio"><input type="radio" name="credits" id="credits" value="2">30 credits</label>

<!-- Step 3 - This apply for both choice 1 and 2 -->
<label class="control-label">Type of study:</label>
<label class="radio"><input type="radio" name="study" id="study" value="1">Within</label> 
<label class="radio"><input type="radio" name="study" id="study" value="2">Between</label>

<!-- Check the number in this input field against the criteria in $within or $between -->
<label class="control-label">Participants:</label>
<input class="input-small" id="participants" name="participants" type="text">

jQueryコード：

<script type="text/javascript">
    $(document).ready(function()
    {       
        var numbers = {
            '1': {  // whithin
                '1': {  // C
                    '1': 36,
                    '2': 63
                },
                '2': {  // D
                    '1': 54,
                    '2': 63
                }
            },
            '2': {  // between
                '1': { // C
                    '1': 60,
                    '2': 105
                },
                '2': { // D
                    '1': 90,
                    '2': 105
                }
                // ...
            }
        };

        $('#participants').change(function() 
        {
            var choice1 = $('input[name=level]:checked').val();

            if (choice1 == '1') 
            {
                var choice2 = $('input[name=authors]:checked').val();
            } 
            else 
            {
                var choice2 = $('input[name=credits]:checked').val();
            }

            var choice3 = $('input[name=study]:checked').val();
            var number = numbers[choice3][choice1][choice2];

            if ($(this).val() < number) 
            {
                $('#part').addClass('error');
            } 
            else 
            {
                $('#part').removeClass('error');
            }
        }
    });
</script>

詳細な説明：

アイデアは、各選択の値を取得し、それらを合計して、配列の1つで指定された値に対応するかどうかを確認することです。

シナリオ：

  1. ユーザーは「Cレベル」（値= 1）を選択し、次に「2人の作成者」（値= 2）を選択します。連結すると12になります。
  2. ユーザーは「Between」（値= 2）を選択し、テキストフィールドに数値95を入力します（id / name = number）。
  3. ユーザーがテキストフィールドからフォーカスを移動すると、jQueryが比較する必要があります。

結果：

jQueryは配列$betweenに入り、値12を検索して、105であることを確認します。95は105以下であるため、DIV1をDIV2に置き換える必要があります（ユーザーが入力した値を保持します）。

DIVコード：

<div id="part" class="control-group">
    <label class="control-label">Participants:</label>

    <div class="controls">
        <div class="input-prepend">
            <input class="input-small" id="participants" name="participants" type="text">
        </div>
    </div>
</div>

ユーザーが別の値を入力してフォーカスを移動した場合は、再計算を行う必要があります。テキストフィールドの値が配列の値以上の場合は、何もしません。

どんな助けでもありがたいです、そして私が本当に立ち往生していなかったら私はこれをタイプしなかっただろう！前もって感謝します。

4

1 に答える 1

1 
var numbers = {
    '1': {  // whithin
        '1': {  // C
            '1': 36,
            '2': 63
        },
        '2': {  // D
            '1': 54,
            '2': 63
        }
    },
    '2': {  // between
        // ...
    }
};
$('#number').change(function() {
    var choice1 = $('input[name=level]:checked').val();
    if (choice1 == '1') {
        var choice2 = $('input[name=authors]:checked').val();
    } else {
        var choice2 = $('input[name=credits]:checked').val();
    }
    var choice3 = $('input[name=study]:checked').val();
    var number = numbers[choice3][choice1][choice2];
    if ($(this).val() < number) {
        $('#yourDiv').addClass('error');
    } else {
        $('#yourDiv').removeClass('error');
    }
});

1/2の代わりに文字列を使用することをお勧めします-理解しやすく、エラーが発生しにくいです。

そのPHP配列が動的である場合は、関数json_encodeを使用してjavascript配列を設定できます。

<script>
    var numbers = <?php echo json_encode($numbers); ?>;
    // rest of code
</script>
于 2012-05-31T22:27:03.547 に答える