1. 程式人生 > >微信小程式點選移除新增class(點選改變背景顏色和字型顏色)

微信小程式點選移除新增class(點選改變背景顏色和字型顏色)

微信小程式不允許DOM操作,所以不能用addClass這種方法,我的用法如下。

點選元素後,獲取元素中data-select值,賦值給catalogSelect,然後判斷二者是否相等,一樣則新增class(class的css可以先寫好)。

這裡寫圖片描述

    <!--頁面-->
    <view class="info_choose ">
        <view class="catalog_name">花色</view>

        <view class="catalog_items display-flex-row"
>
<block wx:for="
{{catalogs}}"> <text data-select="{{item.select}}" class="{{item.select == catalogSelect ? 'active':''}} catalog_item" bindtap="chooseCatalog">{{item.catalogName}}</text> </block> </view> </view>

//js程式碼
Page({ data: { catalogs:[ { "catalogName": "卡其卡其", "select":1 }, { "catalogName": "其卡其卡卡其卡其", "select": 2 }, { "catalogName": "鯉魚鯉魚", "select": 3 }, { "catalogName"
: "神蹟神蹟卡其卡其", "select": 4 }, ], catalogSelect:0,//判斷是否選中 }, chooseCatalog:function(data){ var that=this; that.setData({//把選中值放入判斷值 catalogSelect : data.currentTarget.dataset.select }) } })