收藏
回答

给多个按钮绑定一个事件,但想改变被点击的按钮状态,这么怎么实现

问题模块
API和组件

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

最后一次编辑于  2017-04-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

9 个回答

  • 葛维
    葛维
    2017-04-12

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

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


    2017-04-12
    赞同
    回复
  • 且行且珍惜
    且行且珍惜
    2017-04-12

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

    2017-04-12
    赞同
    回复
  • 葛维
    葛维
    2017-04-12

    当前按钮的状态可以通过判断变量来动态赋值,你可以看一下组件介绍文档,比如button的type属性,data可以声明type变量,后台处理后,通过setData改变type的值,比如warn。这样按钮的type状态自然就变成warn了,其它属性也是同理。

    <button type="{{type}}" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
            disabled="{{disabled}}" bindtap="warn"> warn </button>


    2017-04-12
    赞同
    回复
  • 且行且珍惜
    且行且珍惜
    2017-04-12

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

    2017-04-12
    赞同
    回复
  • Tooko
    Tooko
    2017-04-12

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

    2017-04-12
    赞同
    回复
  • 且行且珍惜
    且行且珍惜
    2017-04-12

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

    2017-04-12
    赞同
    回复
  • Tooko
    Tooko
    2017-04-13

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

    2017-04-13
    赞同
    回复
  • 且行且珍惜
    且行且珍惜
    2017-04-14

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



    2017-04-14
    赞同
    回复
  • Tooko
    Tooko
    2017-04-15

    一样的啊。你用一个数组保存状态,比如currentTab:{false,false,false,false}

    第几个被点击就把currentTab[i]设置成true

    wxml做currentTab[i] ? 'primary' : 'default'的三目运算


    2017-04-15
    赞同
    回复