加上课程

Question

我目前在Javascript中有一个类来处理购物车（只有静态数据）。但是，当我尝试将两个整数加在一起时：

var Cart = {
  handler: {
    totalCost: 0,

    addCost: function() {
      $('#cart li').each(function() {
        var cost = +$(this).attr('cost');
        console.log('single cost: ' + cost);
        var total = this.totalCost + cost;
        console.log('after add: ' + total);
      });
      console.log(this.totalCost);
    }
  }
};

我得到了这个输出：

after add: NaN

我已经尝试确保两个值都是数字，为变量添加+分隔符，我收到相同的输出？工作代码示例位于JsFiddle。

Answer 1

https://jsfiddle.net/d6kccr88/3/

您可以将此值保存在另一个变量that中，并在方法中使用that变量来保存this值

因为在每个方法的jquery中，this的值将是当前正在迭代的当前元素

Answer 2

你有一个范围问题 - 在每个函数中，它不再引用处理程序，而是引用当前迭代的元素。你可以直接引用Cart.handler来解决这个问题：

$(document).ready(function() {

  var Cart = {
    handler: {

      productId: 'pid-',
      totalCost: 0,
      yesNoAlert: $('.display'),

      addCost: function() {
        $('#cart li').each(function() {
          cost = +$(this).attr('cost');
          console.log('single cost: ' + cost);
          total = Cart.handler.totalCost + cost;
          console.log('after add: ' + total);
        });
        console.log(Cart.handler.totalCost);
      },
      removeProduct: function(pid) {
        this.productId = pid;
        this.displayYesNo('remove');
      },
      displayYesNo: function(callback) {
        this.yesNoAlert.attr('callback', callback);
        this.yesNoAlert.slideToggle('slow');
      },
      callback: function(callback) {
        if (callback === 'remove') {
          $('#' + this.productId).hide();
        }
        this.yesNoAlert.hide();
      },
      throw: function(e) {
        $('#error').html(e);
        $('#error').slideToggle('slow');
      }

    }
  };