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

Question

This is the jsFiddle of my code现在，当我按下加号按钮时，我也在尝试增加购物车中的物品，同时也将其减少。它适用于单个文本项名称，如“ ..Chicken”，但当项名称中带有空格时，如“ .chicken andchips”，则不起作用。这是脚本代码，负责添加和减去购物车中已有的项目。

  // 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>

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

指定的值“ undefined”不是有效数字。该值必须与以下正则表达式匹配：-？（\ 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');