Question

我有一个JQuery函数，我试图简单地将2个输入的乘法应用到第3个输入。

但是，由于某种原因，它不起作用。我基本上想要做的是，在我有第一个2的值之后，结果会自动出现在第3个输入上

我尝试寻找答案，但由于缺乏经验，我无法使用正确的关键字。对不起，

<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
   $(".txtMult input").keyup(multInputs);

   function multInputs() {
       var mult = 0;
       // for each row:
       $("txtMult").each(function () {
           // get the values from this row:
           var $val1 = $('.val1', this).val();
           var $val2 = $('.val2', this).val();
           var $total = ($val1 * 1) * ($val2 * 1)
           $('.multTotal',this).text($total);
           mult += $total;
       });
    });


    </script>
</head>
<body>
<div class="txtMult">
    <div class="row">
        <label for="name">Comprimento em centimetros:</label><br />
        <input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br />
    </div>
    <div class="row">
        <label for="email">Largura em centimetros:</label><br />
        <input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br />
    </div>
    <div class="row">
        <label for="email">Área em M<small>2</small></label><br />
        <div class='section'>
        <input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br />
        </div>
    </div>
    </div>
</body>
</html>

Answer 1

您忘记在此处添加.作为课程的前缀

$(".txtMult").each(function () {
---^---

编辑：

对于我们仅使用.text()设置值的输入，需要从.val()更改为val。

$('.multTotal', this).val($total);

FIDDLE DEMO

Answer 2

2件事：

首先，您没有each与正确的selector绑定，而.

class selector

其次，而不是将.val分配给input type="text" 试图分配无效的.text。

<强> DEMO

以下是您需要做的更改：

$(".txtMult input").keyup(multInputs);
function multInputs() {
       var mult = 0;
       // for each row:
       $(".txtMult").each(function () {
           var $val1 = $('.val1', this).val();
           var $val2 = $('.val2', this).val();
           var $total = ($val1 * 1) * ($val2 * 1)
           $('.multTotal',this).val($total); //should be .val()
           mult += $total;
       });
}

Answer 3

这是一个有效的JsFiddle

<强> HTML

<div class="txtMult">
    <div class="row">
        <label for="name">Comprimento em centimetros:</label><br />
        <input id="cmp" class="val1" name="cmp" type="text" value="" size="30" /><br />
    </div>
    <div class="row">
        <label for="email">Largura em centimetros:</label><br />
        <input id="lrg" class="val2" name="lrg" type="text" value="" size="30" /><br />
    </div>
    <div class="row">
        <label for="email">Área em M<small>2</small></label><br />
        <div class='section'>
        <input id="lrg" class="multTotal" name="lrg" type="text" value="" size="30" /><br />
        </div>
    </div>
    </div>

<强>的Javascript

 function multInputs() {
     $(".txtMult").each(function () {
         var $current = $(this);
         // get the values from this row:
         var val1 = $('.val1', $current).val();
         var val2 = $('.val2', $current).val();
         if (val1 != '' && val2 != '') {
             var total = parseInt(val1) * parseInt(val2);
             $('.multTotal', $current).val(total);
         }
     });
 };

$（＆＃34; .txtMult input＆＃34;）。keyup（multInputs）;

Answer 4

有多种元素选择方式。标识为#，类.或位置eq(n)

Demo on plunker

function multInputs() {

 var val1 = $('#cmp').val();
 var val2 = $('#lrg').val();
 $('#result').val(val1*val2);

 //Or
 //var inputs = $(".txtMult input");
 //var val1 = inputs.eq(0).val();
 //var val2 = inputs.eq(1).val();
 //inputs.eq(2).val(val1*val2);

}

JQuery没有运行乘法值的简单函数

4 个答案: