微信小程序列表点击添加class，再点击移除class

Question

这是我项目的一个列表。通过wx:for循环出来的。

<block wx:for="{{group1}}" wx:key='*this'>
  <view class='main-item'>
    <view class='group-name'>{{item.name}}组</view>
    <view class='country {{select1 == country.id ? "active" : ""}}' wx:key='*this' wx:for="{{item.country}}" wx:for-item='country' bindtap='selectCountry1' data-id='{{country.id}}'>
      <image src="{{country.icon}}" class='country-icon'></image>
      <text>{{country.countryName}}</text>
      <view class='border' data-status='border'></view>
    </view>
  </view>
</block>

这个是wxml的代码，因为上面的组名也是一个循环。所以嵌套了一个循环。。

.main-item{
  margin-left: 3%;
  margin-bottom: 3%;
  width: 45%;
  color: #fff;
  box-sizing: border-box;
}
.group-name{
  padding-left: 15rpx;
  height: 45rpx;
  background: #404c57;
  font-size: 30rpx;
  line-height: 45rpx;
}
.country{
  position: relative;
  padding: 15rpx;
  background: rgb(51, 67, 70);
  border-bottom: 1px solid #241323;
  font-size: 30rpx;
}
.country-icon{
  margin-right: 15rpx;
  width: 50rpx;
  height: 35rpx;
  vertical-align: middle;
}
.border{
  position: absolute;
  right: 15rpx;
  top: 18rpx;
  width: 35rpx;
  height: 35rpx;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
}

不知道怎么做才能做到点击某一项的时候，让它改变样式，比如改变一下背景颜色。再点击一次再变回去。
然后默认刚进页面的时候是一项都没有选中的。
接触小程序不久、有没有大佬带飞。。谢谢。。

Answer 1

单选，可以选择使用radio标签，如果非要这样，建议给数组添加true，false，其实跟其他语言写法一样