从点击/更改功能中获取更新的变量值

时间:2017-02-08 16:23:58

标签: javascript jquery function click onchange

我在使用两个变量calPricetpPrice进行简单添加时遇到问题。我首先定义变量然后在单击函数中我从输入获取数据并重新定义变量。那么,当我做var totalPrice = calPrice + tpPrice;时,为什么新定义的值不会打印任何内容?

一旦点击/更改功能运行,我们就说calPrice的数据为10,tpPrice为5 ...为什么我的totalPrice变量不会获取这些值?

var calPrice;
var tpPrice;

$('.calendar-check').on('click', function() {
  calPrice = [];
  $('.calendar-check:checked').each(function() {
    calPrice.push($(this).data('cal-price'));
  });
  $('#pg-price-review').html("$ " + calPrice);
});

$('.tp-pack-check').on('change', function() {
  tpPrice = [];
  $('.tp-pack-check:checked').each(function() {
    tpPrice.push($(this).data('price'));
  });
  $('#tp-cost-review').html("$" + tpPrice);
});

var totalPrice = calPrice + tpPrice;
$('#package-review-total').html(totalPrice);

3 个答案:

答案 0 :(得分:3)

原因是代码中的执行顺序。

你的大多数语句都是jQuery' on(...)的函数调用,它将一个函数注册为事件的回调函数。事件发生后,您将通过的功能运行。

然而,您的var totalPrice = calPrice + tpPrice;行在开头运行一次,此时所有事件侦听器都已定义并注册(但未触发)。

您需要做的是将最后两行放入每个更改变量calPricetpPrice的函数中。为了使事情更易于维护,请将这两行放入名为updateTotal的新函数中,并从其他函数中调用它。

除此之外,我认为您的价格计算错误。您正在定义一个数组并将数据推入其中。这不会对值进行求和。以HTML格式打印数组的内容将产生逗号分隔的值。你想要做的是将数据解析为数字(例如浮点数)并将它们加在一起。

答案 1 :(得分:1)

calPrice和tpPrice区域arrys。您不能通过以下方式对数组进行总计:

cluster = {'ps': ['10.132.0.3:2222'],
                 'master': ['10.132.0.2:2222']}
os.environ['TF_CONFIG'] = json.dumps(
          {'cluster': cluster,
           'task': {'type': 'master', 'index': 0}, 'tf_random_seed':0, 'environment': 'cloud'})

# This config is passed to estimators.
config = tf.contrib.learn.RunConfig()

也许:

var totalPrice = calPrice + tpPrice;

编辑:正确顺序的完整代码:

var totalPrice = = 0;

for(var i = 0; i<= calPrice.length; i++)
  totalPrice += calPrice[i];

for(var j = 0; j<= tpPrice.length; j++)
  totalPrice += tpPrice[j];

答案 2 :(得分:1)

假设这些数组 tpPrice calPrice 包含数字,您可以在这些点击/更改事件处理程序的末尾对它们进行总结和格式化。

此外,在此示例Array.prototype.reduce()中,Array.prototype.map()Array.prototype.join()用于以下目的:

  • Array.prototype.reduce():

    可以总结数字元素,例如:

    [1,2].reduce(function(a,b){return a+b;}, 0) => 3
    
  • Array.prototype.map():

    创建另一个可能包含不同元素的数组,例如

    [1.23, 4.56].map(function(ele){return '$'+ele; }) => ["$1.23", "$4.56"]
    
  • Array.prototype.join():

    可以将数组元素与某些符号连接在一起,例如

    [1,2].join("+") => "1+2"
    

这可能会对您有所帮助:

var calPrice = [];
var tpPrice = [];
$('.calendar-check').on('click', function() {
  calPrice = [];
  $('.calendar-check:checked').each(function() {
    calPrice.push($(this).data('cal-price'));
  });
  var pgPrizeTotal = sumUpArray(calPrice);
  $('#pg-price-review').html('$'+pgPrizeTotal +' = '+ formatArray(calPrice));
  calcTotalPrize();
});

$('.tp-pack-check').on('change', function() {
  tpPrice = [];
  $('.tp-pack-check:checked').each(function() {
    tpPrice.push($(this).data('price'));
  });
  var tpPrizeTotal = sumUpArray(tpPrice);
  $('#tp-cost-review').html('$'+ tpPrizeTotal +' = '+ formatArray(tpPrice));
  calcTotalPrize();
});

function formatArray(array){
    return array.map(function(ele){return '$'+ele; }).join("+");
}

function sumUpArray(array){
    return array.reduce(function(a,b){return a+b;}, 0);
}

function calcTotalPrize(){
    var totalPrice = sumUpArray(calPrice) + sumUpArray(tpPrice);
    $('#package-review-total').html('$'+ totalPrice);
}