Question

我在脚本中遇到一个设计问题，该问题为我提供了右列的值（忽略了左侧的值），并且单击后在绿色框中看不到求和的结果在“查看结果”上

// Old script

/*window.sumInputs = function() {
    var inputs = document.getElementsByTagName('input'),
        result = document.getElementById('total'),
        sumar = 0;            
    
    for(var i=0; i<inputs.length; i++) {
        var ip = inputs[i];
    
        if (ip.name && ip.name.indexOf("total") < 0) {
            sumar += parseInt(ip.value) || 0;
        }
    }

    result.value = sumar;
}*/

// ========================

// New script

$(document).ready(function() {
  var valores = $('#derecha').children();
  var suma = 0;
  $.each(valores, function() {
    valor = $(this).val() || 0;
    suma += parseInt(valor);
  });

  //console.log(suma);
  valores = document.getElementById('total');

});

body p {
  margin: 0 20px
}


/*#izquierda {display:none}*/

#izquierda,
#derecha {
  display: inline-block;
  vertical-align: top;
  width: 140px;
  margin: 20px 20px 20px 20px;
  padding: 10px;
  border: 1px solid #000
}

#izquierda span,
#derecha span,
body span {
  font-weight: bold
}

#izquierda p,
#derecha p {
  margin: 5px auto 15px;
  text-align: center
}

input {
  width: 80px;
  display: block;
  margin: 5px auto;
  padding: 2px 0;
  background: #f2f2f2;
  border: none;
  border: 1px solid #000;
  text-align: center
}

#cont-resultado {
  text-align: center;
  width: 120px;
  padding-left: 40px
}

#cont-resultado input {
  display: inline-block;
  margin: 0 auto 10px;
  background: red;
  color: #fff;
  border: none;
  padding: 10px 0
}

#cont-resultado a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: green;
  padding: 10px 12px
}

#total {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="izquierda">
  <p><span>DIV LEFT</span><br>display="none"</p>
  <input name="qty1" value="240">
  <input name="qty2" value="862">
  <input name="qty3" value="911">
  <input name="qty4" value="">
  <input name="qty5" value="">
  <input name="qty6" value="">
  <input name="qty7" value="">
  <input name="qty8" value="">
</div>

<!-- ================ -->

<div id="derecha">
  <p><span>DIV RIGHT</span><br>display="block"</p>
  <input name="qty1" value="2">
  <input name="qty2" value="2">
  <input name="qty3" value="2">
  <input name="qty4" value="">
  <input name="qty5" value="">
  <input name="qty6" value="">
  <input name="qty7" value="">
  <input name="qty8" value="">
</div>

<!-- ================ -->

<div id="cont-resultado">
  <input name="total" id="total">
  <a href="javascript:sumInputs()">See total</a>
</div>
<br>
<p>What I am looking for is that only the RIGHT column is sumed, ignoring the values in the left column. <br><br><span>The result of example (6) must be seen in the red box...</span></p>

我在做什么错...？

谢谢！

$(document).ready(function(){
var valores = $('#derecha').children();
var suma = 0;
$.each(valores,function(){
  valor = $(this).val() || 0;
  suma += parseInt( valor );
});

//console.log(suma);
valores = document.getElementById('total');

});

Answer 1

您对suma并没有做任何事情，此外，请为孩子.children('input')使用选择器。

$(document).ready(function() {
  function sumInputs(e) {
    e.preventDefault();
    var valores = $('#derecha').children('input');
    var suma = 0;
    $.each(valores, function() {
      valor = $(this).val();
      suma += Number(valor);
    });

    valores = document.getElementById('total');
    $(valores).val(suma);
  }

  $('#sumup').on('click', sumInputs);
});

body p {  margin: 0 20px}/*#izquierda {display:none}*/#izquierda,#derecha {  display: inline-block;  vertical-align: top;  width: 140px;  margin: 20px 20px 20px 20px;  padding: 10px;  border: 1px solid #000}#izquierda span,#derecha span,body span {  font-weight: bold}#izquierda p,#derecha p {  margin: 5px auto 15px;  text-align: center}input {  width: 80px;  display: block;  margin: 5px auto;  padding: 2px 0;  background: #f2f2f2;  border: none;  border: 1px solid #000;  text-align: center}#cont-resultado {  text-align: center;  width: 120px;  padding-left: 40px}#cont-resultado input {  display: inline-block;  margin: 0 auto 10px;  background: red;  color: #fff;  border: none;  padding: 10px 0}#cont-resultado a {  display: inline-block;  text-decoration: none;  color: #fff;  background: green;  padding: 10px 12px}#total {  display: block}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="izquierda">  <p><span>DIV LEFT</span><br>display="none"</p> <input name="qty1" value="240"> <input name="qty2" value="862"> <input name="qty3" value="911"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value="">  <input name="qty8" value=""></div><!-- ================ --><div id="derecha">  <p><span>DIV RIGHT</span><br>display="block"</p> <input name="qty1" value="2"> <input name="qty2" value="2"> <input name="qty3" value="2"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value="">  <input name="qty8" value=""></div><!-- ================ --><div id="cont-resultado"> <input name="total" id="total"> <a id='sumup' href="#">See total</a></div><br><p>What I am looking for is that only the RIGHT column is sumed, ignoring the values in the left column. <br><br><span>The result of example (6) must be seen in the red box...</span></p>

Answer 2

您需要将apply（新值）的值设置为valores：

suma

Javascript-我看不到值总和的结果

2 个答案: