微信小程序如何动态修改一组view的属性值？

Question

问题描述 我想创建三个图片，中间的的opaccity值为1，其余为0.5，点击哪张哪张的opacity变为1，其余的图片变为0.5，在小程序中不能获取dom，不知道该如何操作？
实践过程代码
wxml 部分代码:

<view class="choose" >
    <view class="tu" wx:for="{{array}}" data-opacity="{{item.opacity}}" style='background:url({{item.url}});opacity:{{item.opacity}};background-size: 100% 100%;' bindtap='toggle'></view>
  </view>

js 部分代码:

  data: {
  array:[{
    url: 'shen1.png',
    opacity: '0.5'
  },{
      url: 'shen2.png',
      opacity: '1'
  },{
      url: 'hen3.png',
      opacity: '0.5'
  }]
}}

 toggle:function(e){
    let that = this;
    console.log(e.target.dataset.opacity);
    let opacity = e.target.dataset.opacity == '1' ? '0.5' : '1';
    console.log(opacity);
    //e.target.dataset.opacity=opacity; 这样不能赋值成功
 }

Answer 1

你要修改的是 array 里的对应 opacity。直接改了下，木有跑过代码哦。

<view class="choose" >
    <view class="tu" wx:for="{{array}}" data-id="{{item.id}}" style='background:url({{item.url}});opacity:{{item.opacity}};background-size: 100% 100%;' bindtap='toggle'></view>
</view>

data: {
  array:[{
    url: 'shen1.png',
    opacity: '0.5',
    id: 1
  },{
      url: 'shen2.png',
      opacity: '1',
      id: 2
  },{
      url: 'hen3.png',
      opacity: '0.5',
      id: 3
  }]
}}

 toggle(e){
    let that = this;
    console.log(e.target.dataset.id);
    this.setData({
        array: this.data.array.map(v => {
            return e.target.dataset.id === v.id ? {...v, opacity: '1'} : {...v, opacity: '0.5'}
        })
    })
 }

Answer 2

    <view class="tu" wx:for="{{array}}" data-index="{{index}}" wx:key="{{index}}" style='background:url({{item.url}});opacity:{{item.opacity}};background-size: 100% 100%;' bindtap='toggle'></view>

toggle (e) {
    let myindex = e.currentTarget.dataset.index;
    this.data.array = this.data.array.map((item,index)=>{
      if(myindex===index){
        item.opacity = '1'
      }else{
        item.opacity = '0.5'
      }
      return item;
    });  
    this.setData({
      array:this.data.array
    })
  }

这样做不是很好，当然有好点的方案

<view class="tu" wx:for="{{array}}" wx:key="{{index}}" data-index="{{index}}" style='background:url({{item.url}});opacity:{{index===activeindex?"1":"0.5"}};background-size: 100% 100%;' bindtap='toggle'></view>

在data里添加一个activeindex:0

 toggle (e) {
    let myindex = e.currentTarget.dataset.index;
    this.setData({
      activeindex:myindex
    })
  }