微信小程序 三元运算符 点击循环列表中的某一项 切换颜色 进行参数携带（原创）

先上效果图

 

 

 

 

整体思路大概是 ：wx:for循环出你的list  每个list有单独的id  点击事件bindtap 用三元运算符判断id是否相等，然后js里u_current只要相等就增加一个active，参数携带都在e.currentTarget 里面

 

 

wxml代码

    
      
        
          {{item.name}}
          {{item.money}}元
        
         {{u_selected_value}}
      
    

wxss 代码

.active{
  color:red;
  border:1px solid red;
}

js代码

    u_items: [{
        name: '模特',
        money: '1000'
      },
      {
        name: '演员',
        money: '5550'
      },
      {
        name: '车模',
        money: '2220'
      },
      {
        name: '歌手',
        money: '7770'
      },

    ],
    u_radio_checked: 0,
    index: 0, 


  // U选点击事件
  u_radio_checked: function (e) {
    var that = this;
    console.log(e)
    this.setData({
      u_current: e.currentTarget.id,   //按钮CSS变化
      u_selected_value: e._relatedInfo.anchorRelatedText,
    })
  },

 

 

总结：web端 jq 写多了总是想去进行addclass removeclass ,微信小程序暂时没有dom操作所以用三元运算符配合双向数据绑定也能实现这个需求！