Question

我有一个函数，当在测试应用程序中编写工作正常时，当我将代码移动到一个页面时，它会被触发多次，就好像它是三页btnCal函数只会触发一次。我使用location.reload();来解决问题，但不觉得这是一个很好的编码标准，我不喜欢屏幕上的falsh当我重新加载任何关于我做错了什么的建议或者对如何解决这个问题的想法都非常欢迎

<!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>

Answer 1

使用

$(document).ready(function () {

或

 $(function() {

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

Answer 2

我开始为你重写，但基本上，你有松散的绑定。在坚果壳中，所有“点击”绑定都应该在“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();
  }
 }

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

jQuery函数触发一次

2 个答案: