Question

首先，我到处寻找答案，但由于我是菜鸟，我怀疑我不知道该怎么去谷歌。

我有多个输入字段，其中最后两行继承了前一行的输入。

我没有继承“total”值，因为它不需要继承。

我希望函数识别的是底行的继承值为“更改”，并执行求和函数来计算这些行的总和。由于您将能够进行进一步的计算，因此将它放在一个函数中会很好。

问题：我需要知道的是我如何使函数识别继承的值而不必再次更改它，或者因为我离开字段而使它变得模糊。我希望它是自动的。

解决方案1：继承顶部的“total”，然后更改底部行，并在需要时获得新的总计。

解决方案2：使功能识别“设定值”是一个变化并在此之后进行计算。

两种解决方案都源于不在输入中手动输入值而不进行计算的问题。

http://jsfiddle.net/zcu2wqm4/

$(document).ready(function(){

// FUNCTION 5 - copy data to other Karmdimension fields

    $(".left").keyup(function () {
        $(".left2").val(this.value);
    });

    $(".right").keyup(function () {
        $(".right2").val(this.value);
    });

// END FUNCTION

// FUNCTION 6 - CALCULATION FUNCTION summary from price-fields

    $('input[name=left]').keyup(function() {  
        updateTotal();
    });

    $('input[name=right]').keyup(function() {  
        updateTotal();
    });

    var updateTotal = function () {

        var input1 = parseInt($('input[name=left]').val());
        var input2 = parseInt($('input[name=right]').val());

        if (isNaN(input1) || isNaN(input2)) {

            $('input[name=sum]').val('Both inputs must be numbers');

        } 

        else {    

        $('input[name=sum]').val(input1 + input2);

        }
    };


    // FIELD B PRICE SUMMARY


    $('input[name=left2]').keyup(function() {  
        updateTotal2();
    });

    $('input[name=right2]').keyup(function() {  
        updateTotal2();
    });

    var updateTotal2 = function () {

        var input1 = parseInt($('input[name=left2]').val());
        var input2 = parseInt($('input[name=right2]').val());

        if (isNaN(input1) || isNaN(input2)) {

            $('input[name=sum2]').val('Both inputs must be numbers');

        } 

        else {    

        $('input[name=sum2]').val(input1 + input2);

        }
    };


    // FIELD C PRICE SUMMARY


    $('input[name=left3]').keyup(function() {  
        updateTotal3();
    });

    $('input[name=right3]').keyup(function() {  
        updateTotal3();
    });

    var updateTotal3 = function () {

        var input1 = parseInt($('input[name=left3]').val());
        var input2 = parseInt($('input[name=right3]').val());

        if (isNaN(input1) || isNaN(input2)) {

            $('input[name=sum3]').val('Both inputs must be numbers');

        } 

        else {    

        $('input[name=sum3]').val(input1 + input2);

        }
    };

// END FUNCTION

});

Answer 1

您可以使用jQuery 更改事件，结合或选择器，并对您的html进行轻微调整，以便在一个函数调用中处理所有这些活动：< / p>

示例HMTL：

<input type="number" name="left1" class="left" min="0" />
<input type="number" name="right1" class="right" min="0"/>
<input type="number" name="sum1" class="total" disabled />

<br />

<input type="number" class="left" name="left2" min="0" />
<input type="number" class="right" name="right2" min="0" />
<input type="number" class="total" name="sum2" disabled />


<!-- snip .. -->

在上面的示例中，对于类似类型（右，左，总）的每个输入，类已被更改为相同，同时保持名称不同。这样我们就可以使用jQuery的或选择器，并将其绑定到on事件，如下所示：

$('.left, .right').on('change', function(){ /* snip... */});

如果具有类left或类right值的元素发生更改，则会触发事件。然后，您可以使用this隔离更改的特定元素，并使用简单的逻辑/代码来实现您期望的行为：

var itemClass = $(this).attr('class'); //<-- gives you the elements class (left or right)

示例代码段

$(document).ready(function() {

  // for later use..
  var right = 0,
    left = 0,
    total = 0;

  $(".left, .right").on('change', function() {

    // get the class, matching elems and value
    var itemClass = $(this).attr('class'),
      elems = $('.' + itemClass),
      itemVal = $(this).val();
    
    
    if (itemClass == 'right') {
      right = itemVal;
    } else {
      left = itemVal;
    }

    // set all like inputs to the same value
    elems.val(itemVal);

    // recalculate the total:
    total = parseInt(right) + parseInt(left);
    $('.total').val(total);

  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- -->
<form>
  <input type="number" name="left1" class="left" min="0" />
  <input type="number" name="right1" class="right" min="0" />
  <input type="number" name="sum1" class="total" disabled />

  <br />

  <input type="number" class="left" name="left2" min="0" />
  <input type="number" class="right" name="right2" min="0" />
  <input type="number" class="total" name="sum2" disabled />

  <br />

  <input type="number" class="left" name="left3" min="0" />
  <input type="number" class="right" name="right3" min="0" />
  <input type="number" class="total" name="sum3" disabled />
</form>

计算功能不“识别”变化

1 个答案: