2011-01-17 4 views
0

안녕하세요jQuery를 계산 및

내가 jQuery를 배우려고 노력하고 있습니다를 선택은 나에게 책을 가지고 : jQuery를 닌자로 초보자에서. 가능한 한 많이 배우려고 노력합니다.

나는 초등 학생의 장점을 계산하는 작은 계산 응용 프로그램을 만들려고합니다.

학생은 18 과목의 평점을 선택하게되지만 2 점은 제거됩니다. 하나는 4 개의 다른 성적 중에서 선택할 수 있습니다.

등급 없음, 당신은 다음을 얻습니다 : 0 점. A : 20 점을 획득했습니다. B : 15 점을 획득했습니다. C : 10 점을 얻습니다.

알고리즘

: 학생이 15 세에 도달하면 다음 다른 C 그래서 그것을 계산 : 15 × 20 = 300 포인트 3 × 10 = 30 점. 총 18 개 주제 = 330 점. 그러나 가장 작은 값의 점수 중 2 개는 올바른 것으로 제거해야합니다. 따라서 C 등급 중 두 가지. 그렇다면 공평한 등급 : 15 x 20 = 300 점 3 x 10 = 30 점 - 2 점 x 최소 점수 = 2 x 10 = 20 점. 최종 답은 = 310 점입니다.

모든 라디오 박스를 선택하고 계산을 수행해야하는 방법을 모르겠습니다. 어떻게 생각해야하며 어떻게해야 하는가?

나는 약간의 html 코드를 작성하는데 도움이되었으므로 기본 html 코드를 사용하시기 바랍니다.

<html> 
<head> 
<title>Merit rating</title> 
<script type='text/javascript' src='jquery-1.4.4.min.js'></script> 
<script type='text/javascript' src='script.js'></script> 
<link rel="stylesheet" href="test.css" type="text/css" media="screen" charset="utf-8" /> 
</head> 
<body> 
    <h1>Merit rating is the sum of the 16 best in your grades.</h1> 
    <p>A: 20 points</p> 
    <p>B: 15 points</p> 
    <p>C: 10 points</p> 
    <p>Not rated: 0 points</p> 

    <p><strong>The highest score you can get is 320 which means that it has Distinction in all subjects.</strong></p> 
    <p>Do you have 17 or 18 scores, you remove one or two of the worst grade, your meritis made up of your 16 best scores.</p> 

    <div id="Grade"> 
     <p><strong>Swedish:</strong> <input type="radio" name="radClass" value="20"/>A 
        <input type="radio" name="radClass" value="15"/>B 
        <input type="radio" name="radClass" value="10"/>C 
        <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>English:</strong> <input type="radio" name="radClassEnglish" value="20"/>A 
        <input type="radio" name="radClassEnglish" value="15"/>B 
        <input type="radio" name="radClassEnglish" value="10"/>C 
        <input type="radio" name="radClassEnglish" value="0"/>Not rated 
     </p> 
     <p><strong>Mathematics:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Religion:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Social Studies:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>History:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Geography:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Chemistry:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Physics:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Biology:</strong><input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Technology:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Picture class:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Home economics:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Music:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Sports and Health:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>HandCraft:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Language:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <p><strong>Student Choice:</strong> <input type="radio" name="radClass" value="20"/>A 
         <input type="radio" name="radClass" value="15"/>B 
         <input type="radio" name="radClass" value="10"/>C 
         <input type="radio" name="radClass" value="0"/>Not rated 
     </p> 
     <input type="button" id="calcButton" value="Calculate"/><p id="answer"></p> 
    </div> 

</body> 
</html> 
+3

지금까지 코드를 보여주고 응용 프로그램 작동 방식에 대한 세부 정보를 제거하고 IE에서 확인란을 선택하고 배열 등을 계산하여 도움을 청하십시오. – RobertPitt

+0

죄송합니다. 코드를 지금 편집하십시오. – SHUMA

답변

1

라이브 데모 :http://jsfiddle.net/gx6TM/1/

$('#calcButton').click(function() { 
    var sum = 0, 
     arr = []; 

    // put the values into an array 
    $('input:radio:checked', '#Grade').each(function() { 
     var value = parseInt(this.value, 10); 
     if (!isNaN(value)) { arr.push(value); } 
    }); 

    // sort the array numerically and ascending 
    arr.sort(function(a, b) { 
     return a - b; 
    }); 

    // delete the first two array items (the lowest two scores) 
    arr = arr.slice(2); 

    // calculate the sum 
    for (var i = 0; i < arr.length; i++) { 
     sum += arr[i]; 
    } 

    // print the sum on the page 
    $('#answer').text(sum);  
}); 

참고 또한 라디오 버튼의 이름을 설정해야 각 라디오 버튼 그룹은 고유 한 이름이 너무 속성.

+0

그 중 하나가 평가되지 않은 경우에도 제로 값을 제거해야합니다. – Reigel

+0

@Reigel 각 행의 마지막 라디오 버튼의 값 속성을 의미합니까? –

+0

고마워요 Sime! 코드를 더 잘 이해하기 위해 작성한 함수 중 일부를 확인해야합니다. ^^ – SHUMA