收藏
回答

多个button时如何动态修改触发事件button的innerText?

疑问:当页面有多个同样的button时,如何动态修改指定button的innerText?

目标:点击按钮,将被点击按钮“测试按钮”改为“被点击”。

示例如下:

<button id="1" class="btBtn" size="mini" type="primary" catchtap="goOutTest">测试按钮</button>
<button id="2" class="btBtn" size="mini" type="primary" catchtap="goOutTest">测试按钮</button>


尝试过程:

我想当我点击随意一个按钮时,在goOutTest的function中,改变触发这个方法按钮的文本值,但在帮助文档中没有看到相关属性。

在function(e)中,我想使用event获取元素,然后再innerText也没能成功。

如果我使用变量{{btnInnerText}}代替按钮们初始的“测试按钮”,当我改变变量时,它们都变了,虽然每个按钮都有ID,但我不知道怎么在小程序中,像JavaScript一样,使用getElementById来获取dom元素。。。

所以麻烦大家,告诉我一个高效的方法,来改变触发事件的这个按钮的innerText的方法:(

回答关注问题邀请回答
收藏

3 个回答

  • 乔
    2020-12-14

    感谢二位,可能是我的需求没有表达好。

    出现了“按下葫芦浮起瓢”的按钮效果。

    判断的方式昨天写好后,今天测试发现,如果点击的按钮可以改变,但因为判定的参数只能固定一个,导致其他的按钮条件被释放,都变回了“测试按钮”。

    我本想在JS里面做一个数组btnIdArr[],存储所有点击过来的按钮id,然后页面上三元运算使用{{id in btnIdArr?'被点击':'测试按钮'}},但是没成功。

    然后我理解{{}}可能不太像Java中的El一样,那么我就用View在Button里面循环btnIdArr然后wx:if。不过我发现它不能被动态改变。

    所以最终,我决定!今晚试试wxs,哈哈哈。

    但,我很想究其所以然,所以,伙伴们,如果我不用wxs的话,在页面内,怎么判定一个值是否存在一个动态数组中呢?

    感谢各位。

    2020-12-14
    有用
    回复 3
    • 思男
      思男
      2020-12-14
      无法判断,还是用wxs写一个utils在各个地方都可以用比较方便。
      2020-12-14
      1
      回复
    • 思男
      思男
      2020-12-14
      https://developers.weixin.qq.com/s/tpQtoAmx7nme
      就像这样
      2020-12-14
      1
      回复
    • 乔
      2020-12-14回复思男
      感谢,感谢提供思路和代码。
      2020-12-14
      回复
  • 睡前原谅一切
    睡前原谅一切
    2020-12-14

    查收。

    https://developers.weixin.qq.com/s/vI88YAmh7Ams


    2020-12-14
    有用
    回复 1
    • 乔
      2020-12-14
      感谢
      2020-12-14
      回复
  • 维她命系
    维她命系
    2020-12-14
    index.wxml
    <button id="1" class="btBtn" size="mini" type="primary" data-type="test1" catchtap="goOutTest">{{btnType=='test1'?'被点击':'测试按钮'}}</button>
    <button id="2" class="btBtn" size="mini" type="primary" data-type="test2" catchtap="goOutTest">{{btnType=='test2'?'被点击':'测试按钮'}}</button>
    
    index.js
    goOutTest(e) {
      this.setData({
        btnType: e.currentTarget.dataset.type,
      });
    }
    


    2020-12-14
    有用
    回复 1
    • 乔
      2020-12-14
      感谢
      2020-12-14
      回复
登录 后发表内容
问题标签