-3

我有一个函数，当我在测试应用程序中编写时运行良好，当我将代码移动到一个页面时，它会触发任意次数，就像它是三个页面一样，btnCal 函数只会触发一次。我曾经location.reload();解决过这个问题，但不认为这是一个好的编码标准，而且我不喜欢重新加载时出现的屏幕闪烁问题 关于我做错了什么的任何建议或关于如何解决这个问题的想法都非常受欢迎

<!doctype html>
<html>

    <head>

    <link rel="stylesheet" type="text/css" href="DEX.css">


<script src="http://code.jquery.com/jquery-latest.js"></script>

<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<!--<script src="jquery-1.9.1.js"></script>--><!-- this is the path within the folder-->
<!--<script src="js/jquery-1.9.1.js"></script><!-- this is the path to another folder-->

<script> 
$(document).ready(function () {

$(function() {
$("#dis1").hide();
$("#dis2").show();
$("#dis3").hide();
$("#btn1").hide();
$("#btn2").hide();
$("#newboxes1").show();
$("#newboxes2").hide();
$("#newboxes3").hide();
//$('#age').attr('readonly',false);
$("#age").focus();

});//End Load Page 1


  //Clear Input Box & Reset Drop Down 
    $("#btnClear").click(function (){ 
    $("input[type=text]").val(""); 
    $("textarea").val("");
    $("#DDHt").get(0).selectedIndex = 0; 
    $("#DDWt").get(0).selectedIndex = 0;
    $("#DDSex").get(0).selectedIndex = 0;
    $("#cgLBW").html("");//Clear Output Data Cr Cl
    $("#cgABW").html("");
    $("#cgTBW").html("");
//$("#age").attr("readonly", false);
//location.reload();
    $("#age").focus();

  });//End Clear Input


    $("#btnCal").click(function (){
    var gvAge = $('#age').val();//Gets the Value of input text box
    gvAge = parseInt(gvAge);
    var gvHt = $('#ht').val();

    var gvHtUt = $("#DDHt").prop("selectedIndex");
    gvHtUt = parseInt(gvHtUt);
    if (gvHtUt == 0){
    var htin = gvHt * 0.3937;
    var htcm = gvHt;
    }else{
    var htcm = gvHt * 2.54;
    var htin = gvHt;
    }

    var gvWt  =  $('#wt').val();

    var gvWtUt = $("#DDWt").prop("selectedIndex");
    gvWtUt = parseInt(gvWtUt);
    if (gvWtUt == 0){
    var wtlb = gvWt * 2.2;
    var wtkg = gvWt;
    }else{
    var wtkg = gvWt * 0.4546;
    var wtlb = gvWt;
    }

    var gvSex = $("#DDSex").prop("selectedIndex");
    gvSex = parseInt(gvSex);


    var gvSrCr  =  $('#SrCr').val();
    gvSrCr = parseFloat(gvSrCr);


    <!--  ++++ Ideal Body Weight in Kg ++++ -->

    if (gvSex == 0){
    var LBW = 50 + (2.3 * (htin - 60));
    }else{
    var LBW = 45.5 + (2.3 * (htin - 60));
    }

    var mylbw;
              if (wtkg < LBW){
                  mylbw = wtkg;
              } else {
                  mylbw = LBW;
              }

              //return mylbw;
    //alert("B "+mylbw);

    var CrClLBW;
    CrClLBW = ((140 - gvAge) * LBW) / (gvSrCr * 72);
    CrClLBW = CrClLBW.toFixed(1);
    if (gvSex == 1){
    CrClLBW = CrClLBW * 0.85;
    CrClLBW = CrClLBW.toFixed(1);
    }

    if (wtkg > mylbw){
    var weight = mylbw + (0.4 * (wtkg - mylbw));
    }else{
    var weight = wtkg;
    }

    var CrClABW;
    CrClABW = ((140 - gvAge) * weight) / (gvSrCr * 72);
    CrClABW = CrClABW.toFixed(1);
    if (gvSex == 1){
    CrClABW = CrClABW * 0.85;
    CrClABW = CrClABW.toFixed(1);
    }

    var CrClTBW;
    CrClTBW = ((140 - gvAge) * wtkg) / (gvSrCr * 72);
    CrClTBW = CrClTBW.toFixed(1);
    if (gvSex == 1){
    CrClTBW = CrClTBW * 0.85;
    CrClTBW = CrClTBW.toFixed(1);
    }

    $("#cgLBW span").html(CrClLBW);
    $("#cgABW span").html(CrClABW);
    $("#cgTBW span").html(CrClTBW);

  });//End Calculate Function   




$("#btnSP1").click(function (){
//function showpageone(){
//$("#age").val("");
//$("#ht").val("");
$("input[type=text]").val("");
$("#dis1").hide();
$("#dis2").show();
$("#newboxes3").hide();
$("#newboxes1").show();
    $("#cgLBW").html("");//Clear Output Data Cr Cl
    $("#cgABW").html("");
    $("#cgTBW").html("");
    //location.reload();
$("#age").focus();
});


$("#btnSP2").click(function (){
//function showpagetwo(){ 
$("#dis2").hide();
$("#dis3").show();
$("#btn1").show();
$("#newboxes1").hide();
$("#newboxes2").show();
var P = 45 * 2;
P = parseInt(P);
$("#myO span").html(P);
var T = $("#myO span").html();
T = parseInt(T);
T = T/2;
$("#myC span").html(T);
var gvAge = $('#age').val();//Gets the Value of input text box
gvAge = parseInt(gvAge);
gvAge = gvAge + 100;
$("#myA span").html(gvAge);
var gvHt = $("#ht").val();
gvHt = parseInt(gvHt);
$("#myH span").html(gvHt);
//$('#age').attr('readonly',true);//this makes the Age Input Box Read ONLY
});


$("#btnSP3").click(function (){
//function showpagethree(){
$("#dis3").hide();
$("#dis1").show();
$("#btn2").show();
$("#newboxes2").hide();
$("#newboxes3").show();
//$('#age').attr('readonly',false);
});


$("#btn1").click(function (){
//function returnpageone(){
$("#dis2").show();
$("#dis1").hide();
$("#dis3").hide();
$("#btn1").hide();
$("#newboxes1").show();
$("#newboxes2").hide();
$("#age").focus();
});


$("btn2").click(function (){
//function returnpagetwo(){
$("#dis3").show();
$("#dis2").hide();
$("#btn2").hide();
$("#newboxes2").show();
$("#newboxes3").hide();
});

});
</script>



    <title>DIV Hide & Show |  External JQuery & CSS Folder</title>

    </head>

    <body>

    <H1>E.Dwight Norris R.Ph.</H1>

         <div id="dis1" class="newbtn">
    <input type="button" value="Click for Page 1" id="btnSP1"></input>
    <input id="btn2" type="button" value="Return to Page 2"></input>
         </div>

         <div class="newboxes" id="newboxes1"></div>

    <div id="dis2" class="newbtn">
    <input type="button" value="Click for Page 2" id="btnSP2">

    <fieldset id="FS1"class ="bx2">

       <p>
          <label id="Lage">Age</label>           
          <input type = "text"
                 id = "age"
                 size="8"/>
          <label id="Lyr">years</label>

          <label id="Lht">Height</label>
          <input type = "text"
                 id = "ht"
                 size="8"/>
          <p>
             <select id="DDHt">
               <option value = "0">cm</option>
               <option value = "1">in</option>
             </select>
          </p>

          <label id="Lwt">Weight</label>
          <input type = "text"
                 id = "wt"
                 size="8"/>
          <p>
             <select id="DDWt">
               <option value = "0">Kg</option>
               <option value = "1">lb</option>
             </select>
          </p>

          <label id="Lsex">Gender</label>
          <p>
             <select id="DDSex">
               <option value = "0">Male</option>
               <option value = "1">Female</option>
             </select>
          </p>

          <label id="LSrCr">Sr Cr</label>
          <input type = "text"
                 id = "SrCr"
                 size="8"/>
          <label id="Lmgdl">mg/dl</label>

        </p>       
    </fieldset> 


    <fieldset id="FS2"class ="bx3">
  <label id="LCM">Calculation Method</label>
    <label id="LcgLBW">Cockcroft and Gault Lean BW<sup>Eq 1</sup></label>
    <div id="cgLBW"><span></span></div>
  <label id="LmL1">mL/min</label>
  <label id="LcgABW">Cockcroft and Gault Adjusted BW<sup>Eq 2</sup></label>
  <div id="cgABW"><span></span></div>
  <label id="LmL2">mL/min</label>
  <label id="LcgTBW">Cockcroft and Gault True BW<sup>Eq 3</sup></label>
  <div id="cgTBW"><span></span></div>
  <label id="LmL3">mL/min</label>

  </fieldset> 


  <input type="button" id="btnCal" value="Calculate"></input>
  <input type="button" id="btnClear" value="Clear Form"></input>

    </div>

        <div class="newboxes" id="newboxes2">I am Page 2
    <div id="myO">Value P  <span>remove</span></div>
    <div id="myC">Value T  <span>remove</span></div>
    <div id="myA">Age  <span>remove</span></div>
    <div id="myH">Height  <span>remove</span></div>
        </div>


         <div id="dis3" class="newbtn">
    <input type="button" value="Click for Page 3" id="btnSP3"></input>
    <input id="btn1" type="button" value="Return to Page 1"></input>
        </div>

         <div class="newboxes" id="newboxes3">I am Page 3
    <p>I am set to 900px wide and 780px height for Printing</p>

         </div>

    </body>

</html>
4

2 回答 2

0

要么使用

$(document).ready(function () {

或者

 $(function() {

您正在初始化 onload 函数两次。

于 2013-06-11T17:11:48.393 回答
0

我开始为你重写，但基本上，你有松散的绑定。简而言之，所有“点击”绑定都应该在“onload-doc ready”之内。只使用一次'$(function() {})'。'$(document).ready(function () {})' 和 '$(function () {})' 是等价的。jQuery 文档建议首选 $(function () {})。我也更喜欢它，因为它更短。你只需要其中一个来包装你的“onload”东西。

简而言之，您的代码应该看起来更像这样：

$(function() {
  // Do stuff 'onload' here
  clearMyForm();
  // All your bindings should go here
  $('#btnCal').on('click', function(event) { calculateStuff(); });
  $('#btnSP1').on('click', function(event) { doStuff1(); });    
  $('#btnSP2').on('click', function(event) { doStuff2(); });
});


function clearMyForm() {
  $("#dis1, #dis3, #btn1, #btn2, #newboxes2, #newboxes3").hide();
  $("#newboxes1, #dis2").show();
  //Clear Input Box & Reset Drop Down
  $("#btnClear").click(function (){
  $("input[type=text]").val("");
  $("textarea").val("");
  $("#DDHt, #DDWt, #DDSex").get(0).selectedIndex = 0;
  $("#cgLBW, #cgABW, #cgTBW").html("");
  $("#age").focus();
}

function calculateStuff() {
  if(a > b) { 
    doStuff3();
  } else {
    doStuff4();
  }
 }

 function doStuff1() {
  if(a > c) { 
    doStuff4();
  } else {
    doStuff2();
    clearMyForm();
  }
 }

你明白了。这样，当页面准备好时，您的绑定就会发生。然后，您还可以更干净地调用和调用您的函数。

于 2013-06-11T17:45:52.307 回答