微信小程序实现类似JQuery siblings()的方法 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:36

想要实现的效果:

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
});
} 

相关案例查看更多