zoukankan      html  css  js  c++  java
  • 微信小程序实现类似JQuery siblings()的方法

    想要实现的效果:

    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
        });
      }
  • 相关阅读:
    yes---重复输出指定的字符串
    info---Linux下info格式的帮助指令。
    hostid---打印当前主机的十六进制数字标识
    clear---清除当前屏幕
    whoami---打印当前有效的用户名称
    users---显示当前登录系统的所有用户的用户列表
    md5sum---文件校验和
    mesg---设置当前终端的写权限
    man帮助
    whatis---查询一个命令执行什么功能
  • 原文地址:https://www.cnblogs.com/jvziking/p/8178250.html
Copyright © 2011-2022 走看看