鍍金池/ 問答/HTML/ 小程序?qū)崿F(xiàn)toggleclass功能的問題

小程序?qū)崿F(xiàn)toggleclass功能的問題

<view class='a'>
  <text> Hello {{name}}!</text>
  <block wx:for='{{datas}}' wx:key='u'>
    <button data-index='{{index}}' class='{{index==id?classname:""}}' data-m='{{t==index}}' bindtap="changeName"> {{item.data}} </button>
  </block>
</view>

上面是wxml 三個(gè)btn，想實(shí)現(xiàn)點(diǎn)擊添加classname(class='m'),下面是js部分，可以實(shí)現(xiàn)點(diǎn)擊添加class='m'功能,但是當(dāng)點(diǎn)擊已添加class='m'按鈕時(shí),如何移除此時(shí)按鈕的class?試了半天還沒有想到辦法

var datas = {
  dataa: [{
    data: 'click me1'
  }, {
    data: 'click me2'
  }, {
    data: 'click me3'
  },
  ]
}
Page({
  data: { name: 'lili', classname:'', datas: datas.dataa },
  changeName: function (e) {
    var x = e.currentTarget.dataset.index
    console.log(e.detail)
    this.setData({
      name: 'MINA',
      id: x,
      classname:'m',
    })
    ...
回答
編輯回答
耍太極

你可以用一個(gè)數(shù)組來存class狀態(tài)。

<button data-index='{{index}}' class='{{index+1==selectedList[index]?"m":""}}' bindtap="changeName"> {{item.data}} </button>

Page({
  data: { name: 'lili', selectedList:[], datas: datas.dataa },
  changeName: function (e) {
    var x = e.currentTarget.dataset.index
    this.setData({
        ['selectedList[' + x + ']']: this.data.selectedList[x]?null:x+1
    })
})
2017年4月20日 22:37
編輯回答
冷溫柔

你就一個(gè)變量，要控制這么多東西。。。
每一項(xiàng)加上一個(gè)值來控制是否添加classname吧

2017年12月28日 02:19