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函数。