Question

目前我有这个GPA计算器，可以在输入时计算数据。我想添加一个名为“计算”的计算按钮，它将计算所有输入数据，但仅在按下时计算。因此，只有在按下此按钮时才会进行计算，而不是像目前那样在运行中进行计算。

以下是代码：

var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on('keyup', '.credits', function() {
  $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
  $gpa.text(getTotal());
  $result.is(":hidden") && $result.show();
});

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".credits").each(function() {
    var $this = $(this);
    if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return (sum / gradeTotal).toFixed(2);
}

$(".btn").on("click", function() {

  $('html, body').animate({
    scrollTop: $(document).height()
  }, 'slow');
  return false;
});

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
}
.block {
  margin: 5px;
}
.class {
  border: 1px solid gray;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.credits {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.grade-select {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.btn {
  border: 2px solid black;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
.result {
  border: 2px solid black;
  border-radius: 5px;
  width: 200px;
  height: 100px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
#gpa {
  font-size: 4rem;
  color: black;
  font-weight: bold;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='outer-box'>
  <div class='inner-box'>
    <form class='block'>
      <input type="text" class='class' placeholder="Class">
      </br>
      <select class='credits'>
        <option value="">Credits</option>
        <option value="0.5">Half Year</option>
        <option value="1">Full Year</option>
      </select>
      </br>
      <select class='grade-select'>
        <option value="">Grade</option>
        <option value="4.6">A+</option>
        <option value="4.0">A</option>
        <option value="3.6">B+</option>
        <option value="3.0">B</option>
        <option value="2.6">C+</option>
        <option value="2.0">C</option>
        <option value="1.0">D</option>
        <option value="0.0">F</option>
      </select>
    </form>
  </div>
  <div class='btn btn-default'>Add Class</div>
  <div class='result'>
    <h3 id="gpa">GPA</h3>
  </div>
</div>

Answer 1

将calulate funtionality的调用从下拉更改事件更改为单击按钮

var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on('keyup', '.credits', function() {
  $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
 
});

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".credits").each(function() {
    var $this = $(this);
    if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return (sum / gradeTotal).toFixed(2);
}

$("#Calculate").on("click", function() {
 $gpa.text(getTotal());
  $result.is(":hidden") && $result.show();
  $('html, body').animate({
    scrollTop: $(document).height()
  }, 'slow');
  return false;
});

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
}
.block {
  margin: 5px;
}
.class {
  border: 1px solid gray;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.credits {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.grade-select {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.btn {
  border: 2px solid black;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
.result {
  border: 2px solid black;
  border-radius: 5px;
  width: 200px;
  height: 100px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
#gpa {
  font-size: 4rem;
  color: black;
  font-weight: bold;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='outer-box'>
  <div class='inner-box'>
    <form class='block'>
      <input type="text" class='class' placeholder="Class">
      </br>
      <select class='credits'>
        <option value="">Credits</option>
        <option value="0.5">Half Year</option>
        <option value="1">Full Year</option>
      </select>
      </br>
      <select class='grade-select'>
        <option value="">Grade</option>
        <option value="4.6">A+</option>
        <option value="4.0">A</option>
        <option value="3.6">B+</option>
        <option value="3.0">B</option>
        <option value="2.6">C+</option>
        <option value="2.0">C</option>
        <option value="1.0">D</option>
        <option value="0.0">F</option>
      </select>
    </form>
  </div>
  <div class='btn btn-default'>Add Class</div>
 <button id=Calculate class='btn btn-default' >Calculate</button>
  <div class='result'>
    <h3 id="gpa">GPA</h3>
  </div>
</div>

Answer 2

您正在keyup和change的侦听器中调用getTotal函数。因此，它正在立即计算。如果您希望在点击某个按钮时发生这种情况，请为点击按钮分配一个监听器并在那里拨打getTotal。

类似的东西：

$("#calculate").click(function(){
 // code for getting values from input box using .val()
 //then call getTotal();
});

希望它有所帮助，如果您仍然无法实现它，请告诉我们。

JQuery计算按钮

2 个答案: