码迷,mamicode.com
首页 > 微信 > 详细

微信小程序实现类似JQuery siblings()的方法

时间:2018-01-02 18:50:00      阅读:1309      评论:0      收藏:0      [点我收藏+]

标签:style   span   技术   bin   i++   其他   list   data-   png   

想要实现的效果:

技术分享图片

1、点击数字时背景为红色,字体为白色

2、点击1或2时,对应下面的灰点消失,再次点击其他数字时灰点显示

 

wxml:

<block wx:for="{{weekDay}}" wx:key="item.index">
          <view data-key="{{index}}" bindtap=‘select_d‘ class="day_list {{d_state==index?‘red_day‘:‘‘}}">
            <text>{{item.day_n}}</text>
            <text class=‘{{item.dian_class}} {{item.state==0?"dian_none":"dian_block"}}‘></text>
          </view>
</block>

wxss:

.dian_none{
  display: none!important;
}
.dian_block{
  display: block!important;
}
.red_day{ background-color: #e33c3c; color: #ffffff; } .dian_d{ width: 9rpx; height: 9rpx; background-color: #d8d8d8; border-radius: 50%; display: block; }

 

js:

 

data: {
    date_week:["日","一","二","三","四","五","六"],
    weekDay:[
      {
        day_n:"26",
        dian_class:""
      }, {
        day_n: "27",
        dian_class: ""
      },{
        day_n: "28",
        dian_class: ""
      }, {
        day_n: "29",
        dian_class: ""
      }, {
        day_n: "30",
        dian_class: ""
      }, {
        day_n: "1",
        dian_class: "dian_d",
        state:1
      }, {
        day_n: "2",
        dian_class: "dian_d",
        state:1
      }
   ],
   d_state:"0",
},
select_d:function(e){
    var array = this.data.weekDay;
    var index=e.currentTarget.dataset.key;
    if (array[index].dian_class =="dian_d"){
      for (var i = 0; i < array.length; i++) {
        if (array[i].dian_class == "dian_d") {
          array[i].state = 1;
        }
      }
      array[index].state = 0;
    } else if (array[index].dian_class ==""){
      for (var i = 0; i < array.length; i++){
        if(array[i].dian_class=="dian_d"){
          array[i].state = 1;
        }
      } 
    }
    this.setData({
      d_state:e.currentTarget.dataset.key,
      weekDay:this.data.weekDay
    });
  }

 

微信小程序实现类似JQuery siblings()的方法

标签:style   span   技术   bin   i++   其他   list   data-   png   

原文地址:https://www.cnblogs.com/jvziking/p/8178250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!