js 对象数组 减当前价格时影响了其他的 unitPrice[this.index].uPrice = 1; 这里是赋值的地方

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .content span.right i,.content span.right input{float: left; display: inline-block; width: .62rem; height: .5rem; line-height: .5rem; text-align: center; font-size: .26rem; background: #fff;}
    i.minus,i.plus{width: .6rem !important; background: #F7F4F4 !important;}  </style>
  <script>
    document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/750*100 + 'px';
  </script></head>
<body>
  <div class="content">
        <p class="price"><span>￥</span><strong>32</strong></p>
        <span class="right count"><i class="minus">-</i><input class="num" type="text" name="" value="8"><i class="plus">+</i></span>
  </div>
  <div class="content">
        <p class="price"><span>￥</span><strong>30</strong></p>
        <span class="right count"><i class="minus">-</i><input class="num" type="text" name="" value="8"><i class="plus">+</i></span>
  </div>
  <div class="content">
        <p class="price"><span>￥</span><strong>40</strong></p>
        <span class="right count"><i class="minus">-</i><input class="num" type="text" name="" value="8"><i class="plus">+</i></span>
  </div>
<script type="text/javascript">
  var content = document.getElementsByClassName('content');
  var minus = document.getElementsByClassName('minus');
  var plus = document.getElementsByClassName('plus');
  var num = document.getElementsByClassName('num');
  var price = document.getElementsByTagName('strong');
  var length = content.length;
  var count = 0;
  var unitPrice = [];
  var json = {};
  json.choose = 0;
  json.uPrice = 0;  for(var i=0; i<content.length; i++) {
    unitPrice.push(json)
  }  //加减
  for(var i=0; i<content.length; i++) {
    minus[i].index = i;
    plus[i].index = i;
    unitPrice[i].uPrice = num[i].value * price[i].innerHTML;
    console.log(unitPrice[i]);
    minus[i].addEventListener('touchstart', function() {
      num[this.index].value -= 1;
      if(num[this.index].value < 0) {
        num[this.index].value = 0;
      }
      console.log(this.index);
      unitPrice[this.index].uPrice = 1;
      console.log(unitPrice);
    })
  }</script>
</body>
</html>

解决方案 »

  1.   

    要每次循环都创建一个新的对象for(var i=0; i<content.length; i++) {
      var json = {};
      json.choose = 0;
      json.uPrice = 0;
      unitPrice.push(json)
    }
      

  2.   

    楼上正解，数组里放的是同一个json对象{}，因此unitPrice不同index的操作，会相互影响。
      

  3.   

    楼上正解，我的理解：
    在你定义var json = {};时，因为是对象变量(参见js变量类型，值类型与引用类型)，所以是在栈内存中保存了json变量指向堆内存的地址，在堆内存该地址中保存了该变量的数据内容。改变json变量，是对堆内存中该地址的数据内容改变。
    当你在循环外定义json时，在你的循环中unitPrice.push(json)，每次push的元素(json变量)实际上指向相同的一个内存地址。如果改变了某个元素，即改变了该元素指向的内存地址里的内容，其他元素也会发生相同的改变(因为它们指向同一个地址啊)。
    以上