小程序如何动态设置变量名？

Question

JS

data: {
    isInFront: true
}

...

 flipCard: function(){
    this.setData({
      isInFront: !this.data.isInFront
    })
 }

WXSS

.container-body-box-item{
  width: 200px;
  height: 200px;
  transform:perspective(800px) rotateY(0deg);
  transition:1s;
  transform-style:preserve-3d;
}
.container-body-box-item.show-back{
  transform:perspective(800px) rotateY(-180deg);
}
.front, .back{
  width: 100%;
  height: 100%;
  left:0;
  top: 0;
  color: #fff;
}
.front{
  background: pink;
  position: absolute;
  transform:translateZ(1px);
}
.back{
  background: yellowgreen;
  transform:translateZ(-1px) rotateY(180deg);
}

WXML

 <block wx:for="{{list}}" wx:key="{{index}}">
   <view class="container-body-box-item {{isInFront?'':'show-back'}}" bindtap="flipCard">
    <view class="front">
      <view>正面正面</view>
    </view>
    <view class="back">
      <view>背面背面</view>
    </view>
  </view>
 </block> 

循环输出container-body-box-item这个区块，单独控制翻牌效果，我遇到的问题是不知道怎么单独控制，研究了好久，小程序好像又不能拼接变量名，该如何识别点击的是哪一个区块并让他翻牌呢？

Answer 1

第一种方法：

1. list数组的元素是对象吗，不是的话建议改成对象isInFront作为对象的一个key，这样就可以控制指定的元素
2. 代码:

Page({
    data: {
        list: [
            {
                isInfront: true
            },
            {
                isInfront: true
            },
            {
                isInfront: true
            },
            {
                isInfront: true
            }
        ]
    },
    
    flipCard({ currentTarget: { dataset } }) {
        this.setData({
            [`list[${dataset.index}].isInFront`]: !this.data.list[dataset.index].isInFront
        })
    
    }
})

 <block wx:for="{{list}}" wx:key="{{index}}">
   <view class="container-body-box-item {{item.isInFront?'':'show-back'}}" data-index="{{index}}" bindtap="flipCard">
    <view class="front">
      <view>正面正面</view>
    </view>
    <view class="back">
      <view>背面背面</view>
    </view>
  </view>
 </block> 

第二种方法：

1. 准备一个空的数组，每点击一张牌就把该牌的下标存入数组中
2. 写个wxs判断某一项是否已存在于数组中