Question

我是新手，我被卡住了。

我想总结一下我用这段代码得到的两个结果。

＆＃13;

$(document).ready(function() {
  $('label').click(function() {
    var total = 0;

    $('.option:checked').each(function() {
      total += parseInt($(this).val());
      $(this).parent().css('background', 'gold');
    });

    $('.option:not(:checked)').each(function() {
      $(this).parent().css('background', '#fff');
    });

    $('#total').html(total + ' $');
  });
});

function myFunction() {
  var x = document.getElementById("myNumber").value;
  document.getElementById("demo").innerHTML = x;

  if (x == 5 || x == 6 || x == 7) {
    document.getElementById("demo").innerHTML = 97 * x;

  } else if (x == 8 || x == 9 || x == 10) {
    document.getElementById("demo").innerHTML = 87 * x;

  } else if (x >= 11) {
    document.getElementById("demo").innerHTML = 82 * x
  };
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" id="myNumber">
<button onclick="myFunction()">Sum</button>
<p id="demo"></p>
<br>
<label><input type="checkbox" class="option" value="200" /> Name</label><br />
<label><input type="checkbox" class="option" value="300" /> Blah</label><br />
<label><input type="checkbox" class="option" value="400" /> XYZ</label><br />
<label><input type="checkbox" class="option" value="800" /> Something</label><br />
<label><input type="checkbox" class="option" value="1200" /> Item</label><br />
<br><br> Total :
<div id="total">0 $</div>
<br>

＆＃13;

我的问题是 - 如何将两个结果相加并显示在“总计：＆＃39;在末尾。以及如何删除＆＃39; Sum＆＃39;按钮，这样您就可以实时查看文本框中的结果＆＃39; Total：＆＃39; ？

提前感谢您的任何帮助：）

编辑：我需要文本框和复选框中的总和。例如：如果用户输入了“＆＃39; 5＆＃39;这个数字等于5 * 97 = 485.所以＆＃39; 5＆＃39; +名称（200）应等于685。

Answer 1

使用ID totalHolder创建一个新元素，并在两个函数内部调用第三个函数（例如showTotal()）来对这些值求和：

$(document).ready(function() {
  $('label').click(function() {
    var total = 0;

    $('.option:checked').each(function() {
      total += parseInt($(this).val());
      $(this).parent().css('background', 'gold');
    });

    $('.option:not(:checked)').each(function() {
      $(this).parent().css('background', '#fff');
    });

    $('#total').html(total + ' $');

    showTotal();
  });
});

function myFunction() {
  var x = document.getElementById("myNumber").value;
  document.getElementById("demo").innerHTML = x;

  if (x == 5 || x == 6 || x == 7) {
    document.getElementById("demo").innerHTML = 97 * x;

  } else if (x == 8 || x == 9 || x == 10) {
    document.getElementById("demo").innerHTML = 87 * x;

  } else if (x >= 11) {
    document.getElementById("demo").innerHTML = 82 * x
  };

   showTotal();
}

function showTotal(){
 var result1= parseInt($('#total').html());
 var result2= parseInt($('#demo').html());

  $("#totalHolder").html(result1+result2);
}

要从按钮中删除onClick，您只需要设置一个监听器：

$(docuemnt).ready(function(){
   $("#myNumber").change(function(){ 
       //Call your function inside the listener
       myFunction() 
    })
})

Answer 2

不确定这是否满足您的问题，但您需要做几件事。

您应该在表单中包装输入字段。
为什么要混合使用vanilla JS和jQuery？坚持一个或另一个。
您不应该害怕使用各种功能模块化您的应用程序。
将元素查询移出处理函数，而不是传递它们的值。
您可以在一个循环中切换类，请参阅下文。

/* jQuery plugins */
(function($) {
  /** Checks-off one or more checkboxes in a list of elements. */
  $.fn.check = function(checked) {
    return this.each(function(index, item) {
      if (checked) {
        $(item).prop('checked', 'checked');
      } else {
        $(item).removeProp('checked');
      }
    });
  };
})(jQuery);

$(document).ready(function() {
  $('#myNumber').val(5);                // Set value to 5.
  $('.option').slice(0, 1).check(true); // Check the first checkbox.
  $('label').on('click', handleUpdate); // Attach a 'click' listener for label

  handleUpdate();                       // Call the function.
});

function handleUpdate() {
  var sum = sumValues();
  var num = $('#myNumber').val();
  var mult = getMultiplier(num);
  var total = num * mult + sum;

  $('#total').html(total.toFixed(2) + ' $');
  $('#demo').html(mult);
}

function sumValues() {
  var total = 0;
  $('.option').each(function() {
    var isChecked = $(this).is(':checked');
    if (isChecked) total += parseInt($(this).val());
    $(this).parent().toggleClass('checked', isChecked);
  });
  return total;
}

function getMultiplier(value) {
  if (value < 5) {
    return value;
  }
  switch (value) {
    case 5:
    case 6:
    case 7:
      return 97;
    case 8:
    case 9:
    case 10:
      return 87;
    default:
      return 82;
  }
}

label {
  display: block;
}
.checked {
  background : gold !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="check-form">
  <input type="number" id="myNumber">
  <button onclick="handleUpdate(); return false;">Sum</button>
  <p id="demo"></p>
  <label><input type="checkbox" class="option" value="200" /> Name</label>
  <label><input type="checkbox" class="option" value="300" /> Blah</label>
  <label><input type="checkbox" class="option" value="400" /> XYZ</label>
  <label><input type="checkbox" class="option" value="800" /> Something</label>
  <label><input type="checkbox" class="option" value="1200" /> Item</label>
</form>
<br>Total :
<div id="total">0 $</div>

如何在Javascript中总结两个结果

2 个答案: