javascript - 添加到列表而不重复出版物

基本上，我想做的是更改输入到出版物列表中的数字。问题是每次我更改输入都会保留以前的出版物和出版物的数量。例如：

我单击第一个输入2x，这是我收到的结果：

出版物1：数量：1
出版物1：数量：2

应该发生的是，当您单击输入时它将覆盖先前的数量。因此，例如：

出版物1：数量：1
出版物1：数量2
出版物2：数量1

注意删除线。那应该不复存在了。数量已更新。
CODEPEN

http://codepen.io/Jesders88/pen/evVrrw

的HTML

<input type="number" data-name="something here" data-qty="1" data-id="1">
<input type="number" data-name="something else" data-qty="3" data-id="2">
<input type="number" data-name="something other" data-qty="5" data-id="3">

JAVASCRIPT

publications = new Array;

$('input').on('change', function(e){
  e.preventDefault();

  var pid = parseInt($(this).data('id')); // id of thing
  var name = $(this).data('name'); // name of thing
  var qty = parseInt($(this).data('qty'));

  console.log(pid);
  console.log(name);
  console.log(qty);

  if(typeof publications[pid] == 'undefined')
  {
     publications[pid] = new Array;
     publications[pid][0] = name;
     publications[pid][1] = qty;
  }
  else
  {
     publications[pid][1] = qty;
  }

  console.log(publications);

  $.each(publications, function(i, l){
    //console.log( "Index #" + i + ": " + l );
    console.log(l[0]+' has a qty of: '+l[1]);
  });

});

最佳答案

这里有两个问题，最重要的是：您没有更新$(this).data('qty')，因此它始终是相同的值。我个人将使用对象而不是数组，而仅对qty.value进行操作，而不是与输入中所表示的实际值分开的data属性：

// use an object
var publications = {};

$('input').on('change', function(e){
  e.preventDefault();

  var pid = parseInt($(this).data('id'), 10); // id of thing
  var name = $(this).data('name'); // name of thing
  var qty = parseInt($(this).val(), 10);

  // if you must, set the new quantity into the data property
  $(this).data('qty', qty);

  console.log(pid);
  console.log(name);
  console.log(qty);

  if(!publications[pid])
  {
     publications[pid] = {
       name: name,
       qty: qty
     };
  }
  else
  {
     publications[pid].qty = qty;
  }

  console.log(publications);

  $.each(publications, function(i, l){
    //console.log( "Index #" + i + ": " + l );
    console.log(l.name+' has a qty of: '+l.qty);
  });

});