微信小程序中如何实现俩个按钮点击那个按钮那个按钮变色并获取按钮的值
时间: 2023-09-05 19:15:16 浏览: 121
要实现这个功能,需要以下步骤:
1. 在wxml文件中,定义两个按钮,并给它们绑定不同的事件处理函数,如下所示:
```
<view>
<button bindtap="btn1Click" id="btn1">按钮1</button>
<button bindtap="btn2Click" id="btn2">按钮2</button>
</view>
```
2. 在js文件中,定义事件处理函数,并在函数中获取按钮的值和id,并改变按钮的背景颜色,如下所示:
```
Page({
btn1Click: function(e) {
// 获取按钮的值和id
var btnValue = e.currentTarget.dataset.value;
var btnId = e.currentTarget.id;
// 改变按钮的背景颜色
this.setData({
btn1Color: 'red',
btn2Color: ''
});
},
btn2Click: function(e) {
// 获取按钮的值和id
var btnValue = e.currentTarget.dataset.value;
var btnId = e.currentTarget.id;
// 改变按钮的背景颜色
this.setData({
btn1Color: '',
btn2Color: 'red'
});
}
})
```
3. 在wxml文件中,给按钮绑定样式,如下所示:
```
<view>
<button bindtap="btn1Click" id="btn1" style="background-color: {{btn1Color}};">按钮1</button>
<button bindtap="btn2Click" id="btn2" style="background-color: {{btn2Color}};">按钮2</button>
</view>
```
这样,当点击按钮1时,按钮1的背景颜色会变为红色,并获取按钮1的值和id;当点击按钮2时,按钮2的背景颜色会变为红色,并获取按钮2的值和id。
阅读全文