|
需求：页面渲染得效果是a:b换行展示
a:b a:b ···· 以及多个b得时候， 也换行展示 b b ``` 页面效果： 图片：1.png  控制台输出： 图片：1.1.png 代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box">标题：</div>
<div id="box1">标题1：</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
let a=["工作日几天", "作息时间", "福利"]
let b=["5天", "朝九晚六", "餐补"]
//需求：页面渲染结构是 a:b，a:b
let c='';
for(let i=0;i<a.length;i++){
console.log("拼接a,b",a+":"+b+",")
c+=a+":"+b+"</br>"
}
console.log("c ",c)
//换行
let bStr=''
for(let i in a){
bStr+=a+"</br>"
}
console.log("bStr ",bStr)
$("#box").append(c)
$("#box1").append(bStr)
</script>
</body>
</html>优化：因为上面二个循环有些相似，现在可以用一个方法封装起来，方便多个数据进行换行，可以复用 代码： //要拼接或者换行几个值就通过参数传进去 function strSplice(a,b){
let c='';
//因为我现在这里拼接是二个值，还有单个值进行换行得，所以进行一个判断，根据传入得参数执行不同得代码
if(a&&b){
for(let i=0;i<a.length;i++){
console.log("拼接a,b",a+":"+b+",")
c+=a+":"+b+"</br>"
}
return c;//把拼接好的值返回去
}
else if(a){
for(let i in a){
c+=a+"</br>"
}
return c;
}
}
let c=strSplice(a,b)//调用方法，拼接a:b
let bStr = strSplice(b)//调用方法，对b换行
console.log("拼接a:b ",c)
console.log("多个b换行",bStr)代码得海洋有些深，我这还不会游泳，就带着游泳圈，还要带个打气筒，时不时打点气，不让自己沉下去。希望通过我们得交流和学习，能够慢慢有艘船，在大海中航行，不用为了活下去而忽略海上得风景，其实慢慢成长我们会发现，大海，真是个神秘得地方。 学习使我们优秀，我们一起加油吧！ |
|
最新喜欢： sunshi...
|
公众号
