微信小程序 点击控件后选中其它反选实例详解

   
      
       {{item.name}}
      
      
       {{item.name}}
      
     

.normal{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 color:#1aad19;
 border:1px solid #1aad19;
 background-color:transparent;
}
.selected{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 background-color: #F75000;
 color: white;
}
.selected1{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 background-color: transparent;
 border:1px solid #1aad19;
 color:#1aad19;
 background-image: url(https://wxcx.llzt.net/images/hot.png) ;
 background-position:31px 0px;
 background-repeat:no-repeat;
 background-size:62%;
}
.selected2{
 box-sizing: border-box;
 flex: 0 0 21%;
 margin: 5px 5px;
 height: 50px;
 background-color: #F75000;
 color: white;
 background-image: url(https://wxcx.llzt.net/images/hot.png);
 background-position:31px 0px;
 background-repeat:no-repeat;
 background-size:62%;
}

   for (var i = 0; i < this.data.liuliangItems.length; i++) {
    if (e.target.dataset.orderid == this.data.liuliangItems[i].id) {
     txtArray1[i] = {
      id: this.data.liuliangItems[i].id, changeColor: true,
      price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
      one2one: this.data.liuliangItems[i].one2one
     }
    } else {
     txtArray1[i] = {
      id: this.data.liuliangItems[i].id, changeColor: false,
      price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
      one2one: this.data.liuliangItems[i].one2one
     }
    }
   }