小程序中如何處理這種情況？

需求：當(dāng)用戶(hù)點(diǎn)擊不同的按鈕時(shí)，按鈕的顏色發(fā)生變動(dòng)。（需要點(diǎn)擊點(diǎn)擊多個(gè)，每點(diǎn)擊一個(gè)變一個(gè)。最要也要獲取點(diǎn)擊的id值）
思路：在渲染數(shù)據(jù)時(shí)，綁定一個(gè)標(biāo)志位tag
wxml:
<block wx:for='{{type_list}}'>

      <view bindtap='getTypeId' 
      data-listid='{{item.id}}' 
      data-itemall = '{{item}}'
      class='{{item.tag == 1 ? " " : "active-sty"}}' >{{item.type}}</view>
    </block>

js:
//選擇類(lèi)型數(shù)據(jù)
getTypeId:function(e){

let _this = this;
let _id = parseInt(e.currentTarget.dataset.itemall.id);
console.log(typeof _id,)
_this.setData({
  'type_list[_id].tag' : 2
});

這種情況下會(huì)報(bào)錯(cuò)。

感覺(jué)小程序的實(shí)現(xiàn)與vue不太一樣。
問(wèn)題：如何實(shí)現(xiàn)這種需求？

回答

編輯回答

壞脾滊

試試直接用css偽類(lèi)改變顏色

<input class="btn" type="button" value="btn">

<style>
.btn:hover {
    background: yellow;
}
.btn:active {
    background: red;
}
</style>

2017年11月15日 07:38

編輯回答

厭惡我

給每個(gè)按鈕一個(gè)唯一標(biāo)識(shí)符，data-index或者其他自定義
給每個(gè)按鈕綁定事件，獲取到按鈕唯一標(biāo)識(shí)符
更新activeIndex當(dāng)前選中值
對(duì)比按鈕標(biāo)識(shí)符與activeIndex，相等則給active類(lèi)

代碼

<view class="row">
  <button wx:for="{{btnArr}}" class="{{activeIndex===index?'active':''}}" data-index="{{index}}" bindtap='choose'>{{item.btnName}}</button>
</view>
<view>你現(xiàn)在選擇的是按鈕是</view>
<view>{{btnArr[activeIndex].btnName}}</view>
<view>id:{{btnArr[activeIndex].btnId}}</view>

const app = getApp()

Page({
  data: {
    btnArr: [
      {
        btnName: '自助立案',
        btnId: '1'
      },
      {
        btnName: '自助查詢(xún)',
        btnId: '2'
      },
      {
        btnName: '自助閱卷',
        btnId: '3'
      },
      {
        btnName: '庭審播放',
        btnId: '4'
      }
    ],
    activeIndex:null,
  },
  choose:function(e){
    this.setData({
      activeIndex:e.currentTarget.dataset.index
    })
  },
  onLoad: function () {
   
  }
})