15、任务十五——数组对象遍历、读写、排序
0、题目
- 读取页面上已有的source列表,从中提取出城市以及对应的空气质量
- 将数据按照从小到大顺序排序后,在resort列表中按照顺序显示出来
1、解答过程
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE Task 15——零基础JavaScript编码(三)</title> 6 </head> 7 <body> 8 <ul id="source"> 9 <li>北京空气质量:<b>90</b></li> 10 <li>上海空气质量:<b>70</b></li> 11 <li>天津空气质量:<b>80</b></li> 12 <li>广州空气质量:<b>50</b></li> 13 <li>深圳空气质量:<b>40</b></li> 14 <li>福州空气质量:<b>32</b></li> 15 <li>成都空气质量:<b>90</b></li> 16 </ul> 17 <ul id="resort"> 18 <!-- 19 <li>第一名:北京空气质量:<b>90</b></li> 20 <li>第二名:北京空气质量:<b>90</b></li> 21 <li>第三名:北京空气质量:<b>90</b></li> 22 --> 23 </ul> 24 <button id="sort-btn">排序</button> 25 <script type="text/javascript"> 26 var data=[]; 27 var chinese=["一","二","三","四","五","六","七"];
28
29 /** 30 * getData方法 31 * 读取id为source的列表,获取其中城市名字及城市对应的空气质量 32 * 返回一个数组,格式见函数中示例 33 */ 34 function getData() { 35 var name=document.getElementById("source").getElementsByTagName("li"), 36 number=document.getElementById("source").getElementsByTagName("b"); 37 for(var i=0;i<7;i++){ 38 data[i]=[name[i].innerText.substring(0,2),number[i].innerHTML]; 39 } 40 return data; 41 } 42 /** 43 * sortAqiData 44 * 按空气质量对data进行从小到大的排序 45 * 返回一个排序后的数组 46 */ 47 function sortAqiData(data) { 48 data.sort(function(a,b){ 49 return a[1]-b[1]; 50 }) 51 return data; 52 } 53 /** 54 * render 55 * 将排好序的城市及空气质量指数,输出显示到id位resort的列表中 56 * 格式见ul中的注释的部分 57 */ 58 function render(data) { 59 var content=''; 60 for(var j = 0;j<7;j++){ 61 content+="<li>第"+chinese[j]+"名:"+data[j][0]+"空气质量:<b>"+data[j][1]+"</b></li>"; 62 } 63 document.getElementById("resort").innerHTML=content; 64 } 65 function btnHandle() { 66 var aqiData = getData(); 67 aqiData = sortAqiData(aqiData); 68 render(aqiData); 69 } 70 function init() { 71 // 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数 72 document.getElementById("sort-btn").onclick=btnHandle; 73 } 74 init(); 75 </script> 76 </body> 77 </html>
2、遇到的问题
(1)为得到source列表中的城市名使用了substring()方法截取字符串(如“北京空气质量”)的前两个字,如果存在城市名不是两个字,那么这个方法就不行了,因此可以用name[i].innerHTML.split("空气")[0]截取城市名 (split()方法把字符串分割为字符串数组)。
(2)onclick调用函数
ele.onclick=funcName 的意思就是在ele.onclick中保存了一个funcName方法的一个引用,类似于C语言中的函数指针。当click事件发生的时候,会调用funcName函数;
(注:ele.onclick=function(){ funcName();}也可达到相同目的,适用于需要传递参数的情况)
如果函数加了()就是执行函数了,也就是当eleonclick=funcName()时,ele.onclick获得的就是函数的返回值,即不论click事件发生与否,都会直接调用funcName函数。