<problem>
noselect.png
selected.png
功能需求很简单，点击某个按钮，如果答题正确，被点击的按钮变为蓝色，否则变为红色。
在小程序中，是无法操作DOM元素的，如果用Jquery的话,$(this).addClass('red');真的简单粗暴，没办法，碰上问题了不能躲啊，想办法！
Baidu： “在小程序中动态操作DOM元素的class”
answer.png
此答案是运用data--xx向事件传递参数 + 三元运算符 实现的一个点击DOM元素，切换其class的原理。
比如我要把<button>按钮1</button>点击的时候变成红色
我就可以这样写
<button data-arg="{{1}}" class="{{ arg == 1 ? 'red' : '' }}" bindtap="changeColor">按钮1</button>
<button data-arg="{{2}}" class="{{ arg == 2 ? 'red' : '' }}" bindtap="changeColor">按钮2</button>
// 不知道在事件中如何获取data携带的数据的话，去翻一下小程序文档的 “事件”
事件触发的是第一个按钮，就会this.setData({ arg: event.currentTarget.dataset.arg })，此时第一个按钮变为红色，因为把arg设置为了1，
事件触发的如果是第二个按钮，同样，第二个按钮就会变成红色。
看到这里，似乎一切都很顺当，But! 问题来了，我要解决的问题不光是要变换颜色，而是在变换颜色之前还要加上一层逻辑，用户是否点击了正确的答案，如果答对，加的是蓝色的class，如果答错，加的是红色的class，又陷入了思考的漩涡中。。。
结果当然是想出来喽~
</problem>
<process>
解决思路：1： 一共要有两个class，.right对应正确的蓝色 .false对应错误的红色
2：给每个按钮都加上独一无二的标识 <button wx:for=""{{[选项array]}} data-index="index">
用途： 比如有四个选项，用户选择哪一个，我首先得确定用户操作的是哪个按钮，（和上方网友提供答案思路相同）
3: 然后判断用户如果选择正确，我就给他一个right的class,否则给他一个false的class。
思路是没有问题的，要怎么写呢？
</process>
<answer>
myanswer.png
由于是wx:for动态渲染的，所以不能把index写死，咱们正好用按钮的下标index来代替。
用户点击按钮之后，咱们会得到一个index值，表示的是第几个，我会把this.setData({classSelect: index)}写在点击事件里面。
view模板的四个按钮就会判断：
index != classSelect 吗？ 不等于那就是没有任何class类喽；
比如如果点击的是第二个，第二个按钮会说 我等于！！！
接下来三元哥又会问他 你答对了吗就敢瞎按？
第二个按钮说我也不知道啊！
就在这时，系统会告诉三元哥，他是否答对，答对就给他right的class！
答错？ 哼，firstBlood~~~~~~~
</answer>
<conclusion>
核心思想：用data数据中的两个属性来操控。
一个用于操控具体到哪个DOM节点，
另一个用于操控答案正确与否的Class
</conclusion>
网友评论