发表于： 2019-12-19 22:17:03
1 1282
今日完成
思路:
点击杀手杀人跳转杀手杀人页面(因为法官页面没有点击,出现杀人的图标,所以重新做一个),
杀人图标想到的有两种做法,一个是input type="radio"(单选框,感觉行但是没做),
一种是用js,
思路:还是类似实现叔祖个数的身份模块的思路,
1.每个身份模块下都设置一个杀人图标,然后设置隐藏
2.点击身份,让杀人图标显示
3.遇到问题:思考怎么让点击某一个身份模块时,对应的杀手图标显示?
解决:在二的基础上,同样杀手图标类名绑定,然后点击相应索引值的身份模块,相应索引值的杀手图标显示
4.遇到问题:上述点击后图标不会消失,但杀手图标类似单选框,一次只能出现一个
解决:每次点击都先遍历一次杀手图标的数组,然后在对应索引值的杀手图标显示
遇到问题:
新页面复制粘贴后没有显示
解决(原因):配合函数显示,css中设置了全部隐藏,取消隐藏,先搞定用函数代替单选框的代码
原法官日志显示:
为实现效果
css更改:
1.模块上方,用父元素内边距填充
2.下方添加杀手图标,并添加一个父容器包裹图标和模块,让浮动属和隐藏属性性出现在父容器上
3.为了使图标的的点击显示和隐藏不会影响html的页面布局,所以图标的隐藏属性用:visibility: hidden
html:
<div class="main">
<div class="mainn">
<div class="main-box">
<p class="main-box-t">杀手</p>
<p class="main-box-b">1号</p>
</div>
<img class="main-ioc" src="eee.png " />
</div>
less:
.mainn {
float: left;
margin-left: 10vw; //保证平均分配外边距
width: 20vw; //设置vw为了自适应的同事,能让高度对于宽度,高度也可以取vw
.main-box {
height: 20vw; //为了高度始终与宽度相等
border: 5px solid white; //边框
box-sizing: border-box; //边框向内,为了不影响外边距,排列
... ...
}
.main-ioc{
display: block;
visibility: hidden;
height: 2vw;
margin:4vw auto;
}
}
到这一步静态页面显示正确,编辑js函数代码
var x=document.getElementsByClassName("mainn");
var y=document.getElementsByClassName("main-ioc");
x[i].onclick=function(){
y[i].style.visibility="visible";
}
遇到问题:显示:
i 未定义
解决(笨办法):
挨个设置
x[0].onclick=function(){//点击身份,显示身份索引值对应索引值的杀手图标
for(var i=0;i<18;i++){//显示图标之前,先重置图标隐藏
y[i].style.visibility="hidden";
}
y[0].style.visibility="visible";
}
新思路:在于师弟讨论中,发现还可以在原来的界面更改(原来的界面点击没有杀手图标,所以我才想设置一个新的页面),
他的思路是,运用本地储存,在点击触发,跳转页面时,随便储存一个字符串,跳转页面后,以这个字符串为判断,
在原页面(身份页面),当这个字符串没有传过来时,点击是不触发杀手图标的显示函数的,当字符串传递过来之后,
就可以触发杀手图标的显示隐藏函数
遇到问题:之后大量逻辑思考,本身思维不够灵活,进度缓慢
收获:问题拆解,一步步做,然后看是否能把分散的代码函数,重新组合成一个代码函数
明日计划:继续js2-4
返回列表
评论