Question

我正在尝试进行一些计算，这些计算会接受用户输入并提供用户要查看的计算值。用户将提供两个值，然后返回结果ADF。

我遇到的两个问题：在输入第二个值（FG）之前计算该值;当任一值改变时，不替换旧的ADF。我明白这是因为它一直在应用.append（），但我不知道我需要使用什么。我提供了正在发生的事情的照片。我在下面列出了我的代码。

*请注意，round（）和ADF（）函数是用于计算的Javascript函数，我认为它与列出该代码无关。如果您认为与其相关，请告诉我。

提前感谢您的帮助。

＆＃13;

function main() {
  $(document).on('change', '#Gravities', function () {
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();
    var calc = round(ADF(OG,FG)*100, 2); 
    $('.ADFbox').append('<div class="ADF">'+calc+'%</div>');
  });
}

$(document).ready(main);

＆＃13;

<body>
   <form id="Gravities">	
      <div>
         <p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
      </div>
      <div>
         <p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
      </div>
   </form>
   <div class = 'ADFbox'>
      <p>ADF:</p>
   </div>
</body>
</html>

＆＃13;

enter image description here

Answer 1

要解决此问题，您可以在加载HTML时放置.adf div，然后只需更新text()，而不是使用append()在每次计算后创建新副本。

以下是一个工作示例。请注意，我简化了计算，因为您没有提供round()或ADF()函数的逻辑。试试这个：

function main() {
  $(document).on('change', '#Gravities', function() {
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();
    //var calc = round(ADF(OG, FG) * 100, 2);
    var calc = OG * FG;
    $('.ADFbox .adf').text(calc + '%');
  });
}

$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Gravities">
  <div>
    <p>
      <label class="originalGravity">
        OG: 
        <input type='text' name='OG' value="">
      </label>
    </p>
  </div>

  <div>
    <p>
      <label class="finalGravity">
        FG: 
        <input type='text' name='FG' value="">
      </label>
    </p>
  </div>
</form>
<div class='ADFbox'>
  <p>ADF: <div class="adf"></div></p>
</div>

Answer 2

$(document).on("input", ".gravity", function() {
  var thisval = $(this).val()
  var nothisval = $(".gravity").not(this).val()

  if (thisval.length > 0 && nothisval.length > 0) {//check if one value is empty
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();
    //var calc = round(ADF(OG, FG) * 100, 2);
    var calc = OG * FG;//change this computation
    //$('.ADFbox').append('<div class="ADF">' + calc + '%</div>');
    $('.ADFbox').text("ADF:" + calc).change();


  } else {
    $('.ADFbox').text("ADF: 0");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <form id="Gravities">
    <div>
      <p><label class="originalGravity">OG: <input type='text' class="gravity"name='OG' value ="" /></label></p>
    </div>

    <div>
      <p><label class="finalGravity">FG: <input type='text' class="gravity" name='FG' value=""/></label></p>
    </div>
  </form>
  <div class='ADFbox'>
    <p>ADF:</p>
  </div>
</body>

如果两个值的长度都大于0，则检查每个值然后继续

注意：输入没有结束标记，就像<input />

一样

Answer 3

您要附加html而不更新现有文本值的问题。

只需更改您的代码，如下所示：

$(document).on('change', '#Gravities', function () {
    OG = $('input[name=OG]').val();
    FG = $('input[name=FG]').val();

   if(OG != "" && FG != ""){

     var calc = round(ADF(OG,FG)*100, 2); 
     $('.ADFbox').find("p").html("ADF:"+ calc + '%');

   }

});

Answer 4

function main() {
  $(document).on('change', '#Gravities', function () {
    if($('input[name=OG]').val()!='' && $('input[name=FG]').val()!=''){
       var calc = round(ADF(OG,FG)*100, 2); 
       $('.ADFbox').html('<div class="ADF">'+calc+'%</div>');
    }
  });
}

$(document).ready(main);

	<body>
	  <form id="Gravities">	
	    <div>
		  <p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
		</div>
		
		<div>
		  <p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
		</div>
      </form>
		<div class = 'ADFbox'>
		  <p>ADF:</p>
		</div>
	</body>
</html>

Answer 5

您已添加更改事件。这就是为什么每次更新任何一个字段时都要计算它。我做了一些改动：

   <form id="Gravities">    
        <div>
          <p><label class="originalGravity">OG: <input type='number' name='OG' value =""></input></label></p>
        </div>

        <div>

 <p><label class="finalGravity">FG: <input type='number' name='FG'         value=""></input>
      </label></p>
        </div>
    <button type="button" id="fgs">
    Find ADF</button>
    </button>
      </form>
        <div class = 'ADFbox'>
          <p>ADF:</p>
        </div>

    function main() {
      $("#fgs").on('click', function () {
        OG = $('input[name=OG]').val();

        FG = $('input[name=FG]').val();

        var calc = OG*FG; 
        document.getElementsByClassName("ADFbox")[0].innerHTML= "ADF:"+" " +calc;
      });
    }

    $(document).ready(main);

为你创造了工作小提琴：https://jsfiddle.net/Safoora/hspdgqca/15/

Answer 6

很抱歉，如果我不理解你。根据我的理解，只有两个输入字段都被更改时才需要计算？如果是这样，你可以这样做：

＆＃13;

function main() {
  $(document).on('change', '#Gravities input', function () {
    OG = $('input[name=OG]');
    FG = $('input[name=FG]');
    $(this).data('changed',true); // set "changed=true" for current input
    // Check if both input fields are changed
    if(OG.data('changed') == true && FG.data('changed') == true){
      //var calc = round(ADF(OG.val(),FG.val())*100, 2); // uncomment this
      var calc = OG.val() * FG.val(); // comment this
      $('.ADFbox').html(function(){
        $('#Gravities input').data('changed',false); // set "changed=false" for next query
        return '<div class="ADF">'+calc+'%</div>'
      });
    }
  });
}

$(document).ready(main);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Gravities">	
      <div>
         <p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
      </div>
      <div>
         <p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
      </div>
   </form>
   <div class = 'ADFbox'>
      <p>ADF:</p>
   </div>

＆＃13;

用户输入更改时，使用jQuery更新相同的html元素

6 个答案: