给多个按钮绑定一个事件,但想改变被点击的按钮状态,这么怎么实现
多个按钮是一个事件,能知道点击了哪个按钮实现了后台的操作,但想让被点击的按钮改变文字和状态不知道怎么实现。
多个按钮是一个事件,能知道点击了哪个按钮实现了后台的操作,但想让被点击的按钮改变文字和状态不知道怎么实现。
给每一个button设置data数据。我用data-current举例
<button class=“” hover-class=“” size=“default” type=“{{currentTab==0 ? ‘primary’ : ‘default’}}” data-current=“0” bindtap=“buttonSwitch”>
button1</button>
<button class=“” hover-class=“” size=“default” type=“{{currentTab==1 ? ‘primary’ : ‘default’}}” data-current=“1” bindtap=“buttonSwitch”>
button2</button>
Page({
data: {currentTab: 0,},
buttonSwitch: function (e) {
var that = this
if (this.data.currentTab === e.currentTarget.dataset.current) {
return false
} else {
that.setData({
currentTab: e.currentTarget.dataset.current
})
}
},
不是多选,就是我有一排按钮绑定了一个事件,按你说的方法实现了点击某个按钮这个按钮就变状态了,但是当我再点击其他按钮的时候,这个变了状态的按钮又变回去以前的状态了,实际上我是想某个按钮点击后就一直呈现被点击后的状态,然后再点击下一个,下一个按钮变状态,之前变过状态的保持状态。
一样的啊。你用一个数组保存状态,比如currentTab:{false,false,false,false}
第几个被点击就把currentTab[i]设置成true
wxml做currentTab[i] ? ‘primary’ : 'default’的三目运算
当前按钮的状态可以通过判断变量来动态赋值,你可以看一下组件介绍文档,比如button的type属性,data可以声明type变量,后台处理后,通过setData改变type的值,比如warn。这样按钮的type状态自然就变成warn了,其它属性也是同理。
<button type="{{type}}" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="warn"> warn </button>