当值字符串包含空格时，JavaScript 对象数组未获取

Question

This is the jsFiddle of my code现在我正在尝试在按下加号按钮时使购物车项目增加并且也减少。它适用于单个文本项目名称，如..“鸡”，但当项目名称中有空格时，它不起作用，如......“鸡肉和薯条”。这是负责添加和减去购物车中已有商品的脚本代码。

  // Add to cart
  obj.addItemToCart = function(name, price, count) {
    for(var item in cart) {
      if(cart[item].name === name) {
        cart[item].count ++;
        saveCart();
        return;
      }
    }
    var item = new Item(name, price, count);
    cart.push(item);
    saveCart();
  }

  // Remove item from cart
  obj.removeItemFromCart = function(name) {
      for(var item in cart) {
        if(cart[item].name === name) {
          cart[item].count --;
          if(cart[item].count === 0) {
            cart.splice(item, 1);
          }
          break;
        }
    }
    saveCart();
  }

这是使项目递增和递减的按钮事件函数

// -1
$('.show-cart').on("click", ".minus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCart(name);
  displayCart();
  iconCart();
})
// +1
$('.show-cart').on("click", ".plus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
  iconCart();
})

这是使用数据属性添加项目的 html 按钮

<button data-name="Pepper Soup" data-price="1.22" data-count="1" class="add-to-cart btn btn-primary">Add to cart</button>

这是我在浏览器控制台中遇到的错误...

指定的值“未定义”不是有效数字。该值必须与以下正则表达式匹配：-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

Answer 1

https://jsfiddle.net/wbotk4ue/

用模板字符串替换"" 解决了这个问题。 问题在于数据名称中的空格

Answer 2

已解决！ 我通过在包含数组值的双引号之外添加单引号来解决它，即 data-name='" + cartArray[i].name + "' 到增量按钮和减量按钮

function displayCart() {
  var cartArray = shoppingCart.listCart();
  var shipping = 120;
  var output = "";
  for(var i in cartArray) {
    output += "<tr>"
      + "<td>" + cartArray[i].name + "</td>" 
      + "<td>(" + cartArray[i].price + ")</td>"
      + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name='" + cartArray[i].name + "'>-</button>"
      + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
      + "<button class='plus-item btn btn-primary input-group-addon' data-name='" + cartArray[i].name + "'>+</button></div></td>"
      + "<td><button class='delete-item btn btn-danger' data-name='" + cartArray[i].name + "'>X</button></td>"
      + " = " 
      + "<td>" + cartArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-cart').html(output);
  $('.PandD').html(shipping)
  $('.total-cart').html(shoppingCart.totalCart() + shipping);
  $('.total-count').html(shoppingCart.totalCount());
}

Answer 3

这个解决方案可能很好

value.replace(/ /g, '%25');