PHP와 jQuery로 선택에 따라 배열의 수와 텍스트 필드에 숫자를 비교

Question

문제 :

이 라디오 버튼을 선택하고 배열의 숫자가있는 텍스트 필드의 숫자를 비교 하였다. 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> 

확장 설명 :이

아이디어는 각 선택의 값을하는 것입니다 그것들을 더해서 th에 해당하는지 확인하십시오. e 배열에 주어진 값.

시나리오 :

1. 이용자 "C 수준" 선택 (값 = 1), 다음 연결될 때, 12과 동일 "2 개 저자" (= 2 값)를 선택한다.
2. 사용자는 (값 = 2) 사이에 을 선택하고 텍스트 필드 (id/name = number)에 을 입력합니다.
3. 사용자가 텍스트 필드에서 포커스를 이동하면 jQuery를 비교해야합니다.

결과 :

JQuery와 사이의 배열 $ 들어가는 값 (12)을 보이는 105 95 DIV 2 바꿔야 이하이므로 105 DIV 1과 동일하지 않은 그것의 참조 (사용자가 입력 한 값을 유지하면서).

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> 

사용자 다른 값의 유형과 이동이 집중 경우, 재 계산을 수행해야합니다. 텍스트 필드의 값이 배열의 값보다 크거나 같으면 아무 것도하지 않습니다.

아무런 도움이되지 않아 정말 고생하지 않으면 입력하지 않았을 것입니다! 미리 감사드립니다.

Answer 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 대신 문자열을 사용하는 것이 좋습니다. 이해하기 쉽고 오류가 발생하기 쉽습니다.

<script> 
    var numbers = <?php echo json_encode($numbers); ?>; 
    // rest of code 
</script>