[微信小程序]js动态改变数组对象列表中的样式

 有问题可以扫码加我微信，有偿解决问题。承接小程序开发。

微信小程序开发交流qq群   173683895  、 526474645 ；

正文：

这里我用微信小程序商城开发中选择商品规格选择做示例:

先把效果图让大家看看, 默认情况下是这样的

当点击了规格11以后:    该商品规格的颜色变成红色,并且显示该规格商品的图片和价格

当点击了规格22以后: 该商品规格的颜色变成红色,并且显示该规格商品的图片和价格,同时把其它规格的商品规格颜色恢复成了黑色

下面来给大家看看示例的代码:

<pre class="has">
<code class="language-html">

规格: {{item.arr_guige}}

js

<pre class="has">
<code class="language-javascript"> arr_guige:function(e){
var that = this;
guige_index = e.currentTarget.dataset.index;
var guige_img_src = this.data.img + this.data.guige[guige_index].arr_img;
var arr_price = this.data.guige[guige_index].arr_price;
for (var i = 0; i < this.data.guige.length; i++) {
that.setData({

  if (i == guige_index) {
    that.setData({
      ['guige[' + i + '].is_say_yes']: true,})

  }
}  
this.setData({
  guige_img:true,guige_img_src: guige_img_src,arr_price: arr_price
})

},

css

<pre class="has">
<code class="language-css">.guige {
width: 150rpx;
}
.guige_img{
width: 200rpx;
height: 200rpx
}
.serven {
display: flex;
flex-wrap: wrap;
}

.serven text {
font-size: 32rpx;
border: 1px solid #d0d0d0;
border-radius: 10rpx;
background: #f2f2f2;
padding: 0 15rpx 0 15rpx;
margin: 15rpx;
}
.page_row{
display: flex;
flex-direction: row;
align-items: center;
}