给多个按钮绑定一个事件，但想改变被点击的按钮状态，这么怎么实现
发布于 5 年前 作者 ichang 1117 次浏览 来自 问答

多个按钮是一个事件，能知道点击了哪个按钮实现了后台的操作，但想让被点击的按钮改变文字和状态不知道怎么实现。

9 回复

给每一个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
      })
    }
  },

没明白你意思，我写的判断本来就是单选的逻辑。你是要多选是吧？

我有多个按钮，按你说的方法，我点击了其中一个按钮，所有按钮的type全变了，我只想改变当前点击的这一个按钮。怎么办呢。

不是多选，就是我有一排按钮绑定了一个事件，按你说的方法实现了点击某个按钮这个按钮就变状态了，但是当我再点击其他按钮的时候，这个变了状态的按钮又变回去以前的状态了，实际上我是想某个按钮点击后就一直呈现被点击后的状态，然后再点击下一个，下一个按钮变状态，之前变过状态的保持状态。

谢谢您，你这个方法实现了单个按钮的改变，但是如果我再点其他的按钮，之前改变了状态的按钮又再次变回之前的状态了。

一样的啊。你用一个数组保存状态，比如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>

感谢您的回答，我是想改变当前点击的这个按钮的状态和文字，这个如何实现呢。我有好几个按钮，都绑定的是一个事件，我知道按钮的id值，改变了后端的数据，但无法针对当前点击的这一个按钮操作。

1：实现后台操作后，改变data里的某个变量值

2：按钮可以判断在data里的某个变量值，显示不同文字和状态

回到顶部