在此记录一些在写前端时的一些问题错误以及自己的解决方法(部分问题也许暂时没有良好的解决)。不断的改进与修正。
一、设置标签的属性值有display:flex时同时也需要隐藏此标签。
在写项目时遇到了有的一块东西需要在页面刚载入时不需要显示,但在需要时显示其内容。而且这一块的css设置有display:flex,隐藏时用display:none,再让其显示的时候重新设置一次display:flex属性值就可以。
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test-main>div {
display: flex;
}
</style>
<div id="test-main">
<div id="test-p1">测试第一行</div>
<div id="test-p2" style="display: none;">
<p>测试第二行p1</p>
<p>测试第二行p2</p>
</div>
</div>
<button id="test-btn" type="button">隐藏</button>
<script>
var btn = document.getElementById("test-btn");
btn.onclick=function (){
document.getElementById("test-p2").style.display='flex';
}
</script>
二、splice()函数使用的一个弊端
最近在写的项目中需要进行对数据判重处理显示,一开始就使用了splice()函数进行处理,当时用了一个临时变量接收数据,而后进行对数据的判重处理并填充。但当这个函数使用后,原先的数据也发生了改变,把重复的数据给移除掉了,但这个数据在其他地方也需要用到,因此发生了比较严重的结果。
首先看一下使用splice()处理数据的演示:
var arr1 = [1, 2, 3, 1, 5, 1];
var arr3 = arr1;
for (var i = 0; i < arr3.length; i++) {
for (var j = i + 1; j < arr3.length; j++) {
if (arr3[i] == arr3[j]) {
arr3.splice(j,1);
j--;
}
}
}
console.log(arr1); //结果是1,2,3,5
console.log(arr3); //结果是1,2,3,5
原数组arr1的数据也发生了改变。换一种方式处理数组进行去重。(ps:结果的顺序会发生些变化)
var arr1 = [1, 2, 3, 1, 5, 1];
var arr2 = [];
for (var i = 0; i < arr1.length; i++) {
for (var j = i + 1; j < arr1.length; j++) {
if (arr3[i] == arr3[j]) {
j = ++i;
}
}
arr2.push(arr1[i]);
}
console.log(arr1); //结果是1,2,3,1,5,1
console.log(arr3); //结果是2,3,5,1
三、有关所写项目中confirm弹窗重复出现问题。
在现做的项目中有一个很大的bug存在,自己写的数据动态填充的表格中对于某几列的元素添加click事件并在函数内使用了confirm弹窗或是ajax请求时,页面第一次加载时会弹出一次,刷新一下再点击就会出现两次,依此论推。之前的写法$(document).on(‘click’, “类名”, function () {xxx});
目前解决方案:将那些类的点击函数添加unbind()—>$(document).unbind().on(‘click’, “类名”, function () {xxx});
而将confirm替换成了layer(项目一直引用的是layui的下拉框样式,所以也就直接使用layer)的弹窗。ps:使用前下载引用layer的资源文件。
layer.alert("确认删除【" + roleName + "】吗?", {
skin: 'layui-layer-molv' //样式类名 自定义样式
,closeBtn: 1 // 是否显示关闭按钮
,anim: 5 //动画类型
,btn: ['确定','取消'] //按钮
,icon: 6 // icon
,yes:function(){
}
,btn2:function(){
}
});
未完待续。。。。