WeChat Mini Programs dynamically loaded picture list, how to click a picture to change the style?

as shown in the figure, the whole list is looped out by wx:for. You want to click on the small picture on the right (the small picture is also looped out by wx:for) to add a border color to the picture, and the big image on the left is changed to the corresponding small image, please see

WeChat-Mini-Programs Mini-Program html5 javascript

Mar.23,2021

is a tab function
wxml

 <view wx:for="{{banners}}"  wx:for-item="banner" wx:for-index="idx" >
 <image src="{{banner.img}}" />
 <view>
  <image wx:for="{{banner.imgs}}" data-idx="{{idx}}"  data-index="{{index}}"class="thumbnail {{banner.index==index?'cur':''}}" src="{{item}}"  catchtap="showBanner" />
 <text> {{banner.index}}</text>
 </view>
</view>

wxss

.thumbnail{
  width: 100rpx;
  height: 100rpx;
  margin-right: 10rpx;
   border: 2px solid transparent;
}
.cur{
  border: 2px solid red;
}

Page({
    data: {
         banners: [
          {
            index: 0,
            img: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=a80e4a17ae014c080d3620f76b12696d/42166d224f4a20a40709fb7997529822720ed07d.jpg',
            imgs: ['https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=a80e4a17ae014c080d3620f76b12696d/42166d224f4a20a40709fb7997529822720ed07d.jpg', 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=00c4cfe352fbb2fb202650402e234bc1/d62a6059252dd42a711ec615043b5bb5c9eab87d.jpg', 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=66342e1187d4b31ce4319ce9e6bf4c1a/54fbb2fb43166d22639320c64a2309f79152d2ff.jpg', 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=9e8ac1c952df8db1a8237436684ab631/3ac79f3df8dcd100784b38707e8b4710b8122f88.jpg'],

          },
          {
            index: 0,
            img: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=005e5fcd9aef76c6c4dff379fc7f969f/9358d109b3de9c8234db74636681800a18d843a4.jpg',
            imgs: ['https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=005e5fcd9aef76c6c4dff379fc7f969f/9358d109b3de9c8234db74636681800a18d843a4.jpg', 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=53d730f8daa20cf4529df68d17602053/8d5494eef01f3a2927a062b19325bc315c607c60.jpg', 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=d45d73693f7adab429dd1311eabdd879/562c11dfa9ec8a134f6397a1fe03918fa0ecc072.jpg', 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=5354a1279925bc313f5009ca3fb6e6d4/7e3e6709c93d70cf4566dee4f8dcd100bba12bbe.jpg'],

          },
          {
            index: 0,
            img: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=47772d4895510fb36c147fc5b85aa3f0/8326cffc1e178a8218bb1c51fd03738da877e8b8.jpg',
            imgs: ['https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=47772d4895510fb36c147fc5b85aa3f0/8326cffc1e178a8218bb1c51fd03738da877e8b8.jpg', 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=4ab22f86f91fbe090853cb460a096756/e850352ac65c1038623ade32b9119313b17e89fd.jpg', 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=82905fe6e0f81a4c323fe49bb6430b3c/5882b2b7d0a20cf4bf0e134d7d094b36adaf9982.jpg', 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=83659ab63212b31bd361c57be7715d1f/622762d0f703918f50043b3b5a3d269758eec46e.jpg', 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=c2765b7686b1cb132a643441bc3d3d2b/b8014a90f603738d5fa93cbbb81bb051f919ec4c.jpg'],

          },
        ],
    },
    showBanner:function(e){
      let i = e.target.dataset.idx,
          j = e.target.dataset.index,
          banners = this.data.banners;
      banners[i].index=j;
      banners[i].img = banners[i].imgs[j]
      this.setData({ 
        banners: banners
      })
    }
})

complete case

you can't use index. See if there is any difference between those small pictures, such as adding an attribute to them that is different from other small pictures. I have written one like this

before.

 <text bindtap="changecity" wx:for-item="othercities" wx:for="{{firstname[firstnameindex].city}}" wx:for-index="othercitiesindex" wx:key="index" data-value="{{othercities}}">{{othercities}} </text>

I judge this through value. If there is no difference between those small pictures of yours, there is nothing I can do about it. Not really. You can use the src property of image

Previous: How does React get an instance of a component?

Next: Can facebook-messenger be shared on PC?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5569b-27868.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5569b-27868.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?