小程序 如何点击切换图片？

Question

界面有六张图片，点击其中一张会切换成被点击过的图片，点击其他的图片也会换成被点击过得图片，上一个图片切换回为被点击的图片

Answer 1

真的很基本啊啊啊啊

---

算了 我真的也很闲

//js

Page({
    data: {
        imgLIst: [
            {
                url: `noClick1.jpg`,
                hoverUrl: `isClick1.jpg`
            },
            {
                url: `noClick2.jpg`,
                hoverUrl: `isClick2.jpg`
            },
            {
                url: `noClick3.jpg`,
                hoverUrl: `isClick3.jpg`
            }
        ],
        imgHoverIndex:0
    },

    chooseThis(e){
        this.setData({
            imgHoverIndex: e.currentTarget.dataset.index
        })
    }
})

// wxml

<block wx:for='{{imgLIst}}' wx:key='img'>
    <view class='test' bindtap='chooseThis' data-index='{{index}}'>
        <text>{{imgHoverIndex == index ?item.hoverUrl:item.url}}</text>
        <image src='{{imgHoverIndex == index ?item.hoverUrl:item.url}}'></image>
    </view>
</block>

// wxss

.test{
    width: 200rpx;
    float: left;
    margin-right: 20rpx;
    color: #fff;
    text-align: center;
}
.test:nth-child(1){
    background-color: red;
}
.test:nth-child(2){
    background-color: green;
}
.test:nth-child(3){
    background-color: blue;
}
.test image{
    width: 200rpx;
    height: 200rpx;
}

自己运行吧

Answer 2

老铁看文档啊

  <view class='box'>
    <view  class='box_list' wx:for="{{listInfo}}"  data-current="{{index}}" wx:key="this" bindtap="chooseImg">
        <image class="box-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
        <image class="box-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
        <text class="box-text">{{item.title}}{{index}}</text>
    </view>
  </view>

.box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20rpx;
}
.box_list{
    display: flex;
    flex-direction: column;
  align-items: center;
    justify-content: space-around;
    margin-top: 20rpx;
}
.box-image{
    height: 84rpx;
    width: 84rpx;
    margin-bottom: 10rpx;
}
.box-text{
    font-size: 28rpx;
}

Page({
  data: {
  curIdx:null,
  listInfo:[
      {
          title:'效果一',
          imgUrl: '../../image/icon-1.png',
          curUrl: '../../image/icon-1-cur.png',
      },
      {
        title: '效果二',
        imgUrl: '../../image/icon-2.png',
        curUrl: '../../image/icon-2-cur.png',
      },
      {
        title: '效果三',
        imgUrl: '../../image/icon-3.png',
        curUrl: '../../image/icon-3-cur.png',
      },
  ]
  },
   chooseImg: function (e) {
     this.setData({
       curIdx: e.currentTarget.dataset.current
     })
    //  console.log(e)
    //  console.log(this.data.curIdx) 
  }
})