疑问:当页面有多个同样的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的方法:(
感谢二位,可能是我的需求没有表达好。
出现了“按下葫芦浮起瓢”的按钮效果。
判断的方式昨天写好后,今天测试发现,如果点击的按钮可以改变,但因为判定的参数只能固定一个,导致其他的按钮条件被释放,都变回了“测试按钮”。
我本想在JS里面做一个数组btnIdArr[],存储所有点击过来的按钮id,然后页面上三元运算使用{{id in btnIdArr?'被点击':'测试按钮'}},但是没成功。
然后我理解{{}}可能不太像Java中的El一样,那么我就用View在Button里面循环btnIdArr然后wx:if。不过我发现它不能被动态改变。
所以最终,我决定!今晚试试wxs,哈哈哈。
但,我很想究其所以然,所以,伙伴们,如果我不用wxs的话,在页面内,怎么判定一个值是否存在一个动态数组中呢?
感谢各位。
就像这样
查收。
https://developers.weixin.qq.com/s/vI88YAmh7Ams
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, }); }