Question

我有这段代码：

＆＃13;

$(document).ready(function(){
    $('.container select').each(function(){
    		$(this).on('change', function(){
        		var selectedVal = $(this).val();
            //console.log(selectedVal);
        });
    });
 $('input').on('change', function () {
    var sum = 0;
    $('input').each(function() {
        sum += Number($(this).val());
    });
	   $('.total span').html(sum);
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='full'>
     <input type='number' value=''>
     <select name='select1'>
        <option value='a1'>A1</option>
        <option value='a2'>A2</option>
      </select>
  </div>
  <div class='full'>
     <input type='number' value=''>
     <select name='select2'>
        <option value='a1'>A1</option>
        <option value='a2'>A2</option>
      </select>
  </div>
  <div class='full'>
     <input type='number' value=''>
     <select name='select3'>
        <option value='a1'>A1</option>
        <option value='a2'>A2</option>
      </select>
  </div>
  <div class='total'>
     Total nr: <span>5(2 A1, 3 A2)</span>
  </div>
</div>

＆＃13;

是否有可能在更改选择和输入类型编号时使用JavaScript / jQuery修改上面代码中的总数？任何人都可以帮我这个。

在输入或选择字段的每次更改时，我需要计算A1的总数和A2的总数。希望这是有道理的。并将它们显示在总数旁边。

JSFiddle

Answer 1

我们无法为您提供完整的代码，但我试图为您想要的内容提供一些逻辑。我想您想要这样的事情：

＆＃13;

angular.module('app', [])
    .controller('MyCtrl', function ($scope) {
    $scope.arrowdown = true;
    $scope.arrowup = false;
  
    $scope.headers=[{
      "name":"Subsection Header#1",
      "arrowup":"arrowup",
      "close":"close",
      "arrowdown":"arrowdown",
      "open":"open"}];

  $scope.open = function() {
        $scope.arrowdown = !$scope.arrowdown;
        $scope.arrowup = !$scope.arrowup;
      }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller="MyCtrl">

  <div class="arrow-down" 
       ng-repeat="header in headers"    
       ng-show="arrowdown">{{header | json}}

  </div>
  <button ng-click="open()">Show/Hide</button>
</div>

＆＃13;

Answer 2

这适用于select中的任意列表。

function change() {
  var res = {}, fulls = $('.container .full');
  fulls.each(function(index){
    var selected = $(this).find('select > option:selected').text();
    if (! res[selected]) res[selected] = 0;
    res[selected] += 1*$(this).find('input[type="number"]').val();
  });
  var detail = "", total = 0;
  for(prop in res) {
    if (res.hasOwnProperty(prop)) {
      try {
        var val = 1*res[prop];
        detail += ", "+val+" "+prop;
        total += val;
      }catch(e){}
    }
  }
  $('.total > span').text(""+total+" ("+detail.substr(2)+")");
}

$().add('.container .full input[type="number"]')
   .add('.container .full select[name^="select"]')
   .on('change', change);

如何在JavaScript中关联两个输入？

2 个答案: