jquery 라디오 버튼 외에도 두 가지 사소한 문제가 있습니다.

Question

내 JSfiddle로 쉽게 만들 수 있습니다. - 편집 : 탭 3에서 작동하는 내 방정식에 대한 도움이 필요합니다.

http://jsfiddle.net/7q8nkvwc/

마지막으로, 마지막 질문은 내가 작동하지 않는 BMI (tab3에)를 위해 한 내 식이다. BMI 결과는 거의 항상 숫자 15와 40 사이에 나와야합니다. 나는 그것을 작성하는 몇 가지 다른 방법을 시도했지만, 아무 소용이 없어도 15-40에 가까운 값이 나오지 않습니다. 그냥 내가 어떻게 다시 쓸 수 있는지 궁금 해서요.

시간과 인내심을 가져 주셔서 감사합니다. HTML :

<h2>Health Calculator</h2> 

<!-- tabs setup for page --> 
<div id="tabs"> 
    <ul> 
     <li> 
      <a href="#tabs-1">First</a> 
     </li> 
     <li> 
      <a href="#tabs-2">Second</a> 
     </li> 
     <li> 
      <a href="#tabs-3">Third</a> 
     </li> 
    </ul> 
    <div id="tabs-1"> 
     <p><strong>Exercise</strong></p> 
     <!-- Form for Tab one --> 
     <form> 
      <p><strong>Activity factor</strong></p> 
      <!-- Setup Radio buttons --> 
      <p> 
       <input type="radio" name="activity" id="sed" value="1.2"/> 
       <label for="sed" id="sedLabel">Sedentary = BMR X 1.2 (little or no exercise, desk job)</label> 
      </p> 
      <p> 
       <input type="radio" name="activity" id="lit" value="1.375"/> 
       <label for="lit" id="litLabel">Lightly active = BMR X 1.375 (light exercise/sports 1-3 days/wk)</label> 
      </p> 
      <p> 
       <input type="radio" name="activity" id="mod" value="1.55"/> 
       <label for="mod" id="modLabel">Mod. active = BMR X 1.55 (moderate exercise/sports 3-5 days/wk)</label> 
      </p> 
      <p> 
       <input type="radio" name="activity" id="very" value="1.725"/> 
       <label for="very" id="veryLabel">Very active = BMR X 1.725 (hard exercise/sports 6-7 days/wk)</label> 
      </p> 
      <p> 
       <input type="radio" name="activity" id="ext" value="1.9"/> 
       <label for="ext" id="extLabel">Extr. Active = BMR X 1.9 (hard daily exercise/sports &amp; physical job or 2 X day training, marathon, football camp, contest, etc.)</label> 
      </p> 
     </form> 
    </div> 
    <div id="tabs-2"> 
     <!-- Div and form setup for tab 2 --> 
     <p>Diet - Caloric maintenance</p> 
     <!-- The equation is shown for reference --> 
     <p>Men: Base result = 66 + (13.7 X wt in kg) + (5 X ht in cm) - (6.8 X age in years)</p> 
     <p>The base result is then modified by the previously selected activity level to give you your average daily calorie expenditure</p> 
     <!--Form for weight, height, and age of Caloric Maintenance calc.--> 
     <!-- Form to all text entry for values --> 
     <form> 
      <label for="txtWeight">Weight:</label> 
      <input type="text" class="txtInput" id="txtWeight" value="0"/> 
      <label for="txtHeight">Height:</label> 
      <input type="text" class="txtInput" id="txtHeight" value="0"/> 
      <label for="txtAge">Age:</label> 
      <input type="text" class="txtInput" id="txtAge" value="0"/> 
      <br/> 
      <input type="button" id="btnCalc1" value="Calculate"/> 
      <p id="result">Result</p> 
     </form> 
     <p>------------------------------------------</p> 
     <!-- This is a conversion section since the above mention equation uses metric system--> 
     <br/> 
     <form> 
      <label for="txtWeight">Lbs to Kg::</label> 
      <input type="text" class="txtInput" id="txtLbs" value="0"/> 
      <br/> 
      <input type="button" id="btnCalc2" value="Calculate"/> 
      <p id="result2">Result</p> 
      <label for="txtHeight">Inches to Cm:</label> 
      <input type="text" class="txtInput" id="txtInch" value="0"/> 
      <br/> 
      <input type="button" id="btnCalc3" value="Calculate"/> 
      <p id="result3">Result</p> 
     </form> 
    </div> 
    <!-- Div and form setup for Tab 3 --> 
    <div id="tabs-3"> 
     <p>BMI Calculator</p> 
     <!-- The equation is shown for reference --> 
     <p>BMI = (Mass (lb)/height(in)^2) * 703</p> 
     <!-- Form to all text entry for values --> 
     <form> 
      <label for="txtMass">Mass in Lbs:</label> 
      <input type="text" class="txtInput" id="txtMass" value="0"/> 
      <label for="txtHinch">Height in Inches:</label> 
      <input type="text" class="txtInput" id="txtInput" value="0"/> 
      <br/> 
      <input type="button" id="btnCalc4" value="Calculate"/> 
      <p id="result4">Result</p> 
     </form> 
    </div> 
</div> 

</body> 

자바 스크립트 :

// JavaScript Document 
$(function() { 
    $('#tabs').tabs(); 

}); 

// Tab 2 
$(function() { 
    //Identify Variables 
    var txtWeight, txtHeight, txtAge; 
    // attach event listener to the toggle button's click event 
    $('#btnCalc1').click(function() { 
     var result = 66 + (13.7 * $('#txtWeight').val()) + (5 * $('#txtHeight').val()) - (6.8 * $('#txtAge').val()); 
     var activity = $('input[name="activity"]:checked').val() || 0; 
     $('#result').html('Result: '+activity * result) 
    }); 

}); 
// Still Tab 2, but second half 
$(function() { 
    //Identify Variables 
    var txtInch, txtLbs; 
    // attach event listener to the toggle button's click event 
    $('#btnCalc2').click(function() { 
     result2 = $('#txtLbs').val() * 0.45359237; 
     //Output result 
     $('#result2').html('Result: '+result2) 
    }); 
    $('#btnCalc3').click(function() { 
     result3 = $('#txtInch').val() * 2.54; 
     //Output result 
     $('#result3').html('Result: '+result3) 
    }); 


}); 

//Tab 3 
$(function() { 
    //Identify Variables 
    var txtMass, txtHinch; 
    // attach event listener to the toggle button's click event 
    $('#btnCalc4').click(function() { 
     result4 = ($('#txtMass').val()/($('#txtHinch') * $('#txtHinch'))) * 703; 
     $('#result4').html('Result: '+result4) 

    }); 


}); 

Answer 1

당신은 선택 라디오 버튼을 선택합니다 :checked-selector를 사용할 수 있습니다. .html을 사용하여 요소의 내용을 변경하십시오.

그래서

$(function() { 
 
    $('#tabs').tabs(); 
 

 
}); 
 

 
// Tab 2 
 
$(function() { 
 
    //Identify Variables 
 
    var txtWeight, txtHeight, txtAge; 
 
    // attach event listener to the toggle button's click event 
 
    $('#btnCalc1').click(function() { 
 
     var result = 66 + (13.7 * $('#txtWeight').val()) + (5 * $('#txtHeight').val()) - (6.8 * $('#txtAge').val()); 
 
     var activity = $('input[name="activity"]:checked').val() || 0; 
 
     $('#result').html('Result: ' + activity * result) 
 
    }); 
 

 
}); 
 
// Still Tab 2, but second half 
 
$(function() { 
 
    //Identify Variables 
 
    var txtInch, txtLbs; 
 
    // attach event listener to the toggle button's click event 
 
    $('#btnCalc2').click(function() { 
 
     var result = $('#txtLbs').val() * 0.45359237; 
 
     $('#result2').html('Result: ' + result) 
 
    }); 
 
    $('#btnCalc3').click(function() { 
 
     var result = $('#txtInch').val() * 2.54; 
 
     $('#result3').html('Result: ' + result) 
 
    }); 
 

 

 
}); 
 

 
//Tab 3 
 
$(function() { 
 
    //Identify Variables 
 
    var txtMass, txtHinch; 
 
    // attach event listener to the toggle button's click event 
 
    $('#btnCalc4').click(function() { 
 
     var result = ($('#txtMass').val()/($('#txtHinch') * $('#txtHinch'))) * 703; 
 
     $('#result4').html('Result: ' + result) 
 

 
    }); 
 

 

 
});

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<h2>Health Calculator</h2> 
 

 
<!-- tabs setup for page --> 
 
<div id="tabs"> 
 
    <ul> 
 
     <li> 
 
      <a href="#tabs-1">First</a> 
 
     </li> 
 
     <li> 
 
      <a href="#tabs-2">Second</a> 
 
     </li> 
 
     <li> 
 
      <a href="#tabs-3">Third</a> 
 
     </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
     <p><strong>Exercise</strong></p> 
 
     <!-- Form for Tab one --> 
 
     <form> 
 
      <p><strong>Activity factor</strong></p> 
 
      <!-- Setup Radio buttons --> 
 
      <p> 
 
       <input type="radio" name="activity" id="sed" value="1.2"/> 
 
       <label for="sed" id="sedLabel">Sedentary = BMR X 1.2 (little or no exercise, desk job)</label> 
 
      </p> 
 
      <p> 
 
       <input type="radio" name="activity" id="lit" value="1.375"/> 
 
       <label for="lit" id="litLabel">Lightly active = BMR X 1.375 (light exercise/sports 1-3 days/wk)</label> 
 
      </p> 
 
      <p> 
 
       <input type="radio" name="activity" id="mod" value="1.55"/> 
 
       <label for="mod" id="modLabel">Mod. active = BMR X 1.55 (moderate exercise/sports 3-5 days/wk)</label> 
 
      </p> 
 
      <p> 
 
       <input type="radio" name="activity" id="very" value="1.725"/> 
 
       <label for="very" id="veryLabel">Very active = BMR X 1.725 (hard exercise/sports 6-7 days/wk)</label> 
 
      </p> 
 
      <p> 
 
       <input type="radio" name="activity" id="ext" value="1.9"/> 
 
       <label for="ext" id="extLabel">Extr. Active = BMR X 1.9 (hard daily exercise/sports &amp; physical job or 2 X day training, marathon, football camp, contest, etc.)</label> 
 
      </p> 
 
     </form> 
 
    </div> 
 
    <div id="tabs-2"> 
 
     <!-- Div and form setup for tab 2 --> 
 
     <p>Diet - Caloric maintenance</p> 
 
     <!-- The equation is shown for reference --> 
 
     <p>Men: Base result = 66 + (13.7 X wt in kg) + (5 X ht in cm) - (6.8 X age in years)</p> 
 
     <p>The base result is then modified by the previously selected activity level to give you your average daily calorie expenditure</p> 
 
     <!--Form for weight, height, and age of Caloric Maintenance calc.--> 
 
     <!-- Form to all text entry for values --> 
 
     <form> 
 
      <label for="txtWeight">Weight:</label> 
 
      <input type="text" class="txtInput" id="txtWeight" value="0"/> 
 
      <label for="txtHeight">Height:</label> 
 
      <input type="text" class="txtInput" id="txtHeight" value="0"/> 
 
      <label for="txtAge">Age:</label> 
 
      <input type="text" class="txtInput" id="txtAge" value="0"/> 
 
      <br/> 
 
      <input type="button" id="btnCalc1" value="Calculate"/> 
 
      <p id="result">Result</p> 
 
     </form> 
 
     <p>------------------------------------------</p> 
 
     <!-- This is a conversion section since the above mention equation uses metric system--> 
 
     <br/> 
 
     <form> 
 
      <label for="txtWeight">Lbs to Kg::</label> 
 
      <input type="text" class="txtInput" id="txtLbs" value="0"/> 
 
      <br/> 
 
      <input type="button" id="btnCalc2" value="Calculate"/> 
 
      <p id="result2">Result</p> 
 
      <label for="txtHeight">Inches to Cm:</label> 
 
      <input type="text" class="txtInput" id="txtInch" value="0"/> 
 
      <br/> 
 
      <input type="button" id="btnCalc3" value="Calculate"/> 
 
      <p id="result3">Result</p> 
 
     </form> 
 
    </div> 
 
    <!-- Div and form setup for Tab 3 --> 
 
    <div id="tabs-3"> 
 
     <p>BMI Calculator</p> 
 
     <!-- The equation is shown for reference --> 
 
     <p>BMI = (Mass (lb)/height(in)^2) * 703</p> 
 
     <!-- Form to all text entry for values --> 
 
     <form> 
 
      <label for="txtMass">Mass in Lbs:</label> 
 
      <input type="text" class="txtInput" id="txtMass" value="0"/> 
 
      <label for="txtHinch">Height in Inches:</label> 
 
      <input type="text" class="txtInput" id="txtInput" value="0"/> 
 
      <br/> 
 
      <input type="button" id="btnCalc4" value="Calculate"/> 
 
      <p id="result4">Result</p> 
 
     </form> 
 
    </div> 
 
</div>