自定义属性，第一节——JS学习笔记2015-5-25（第38天）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
 8 </style>
 9 <script>
10 window.onload = function (){
11     var aLi = document.getElementsByTagName('li');
12     // var onOff = true;    // 只能控制一组！
13     
14     for( var i=0; i<aLi.length; i++ ){
15         
16         aLi[i].onOff = true;
17         
18         aLi[i].onclick = function (){
19             
20             // alert( this.style.background );
21             // 背景不能判断
22             // color red #f00 
23             // 相对路径
24             
25             if ( this.onOff ) {
26                 this.style.background = 'url(img/active.png)';
27                 this.onOff = false;
28             } else {
29                 this.style.background = 'url(img/normal.png)';
30                 this.onOff = true;
31             }
32         };
33     }
34 };
35 </script>
36 </head>
37 
38 <body>
39 
40 <ul>
41     <li></li>
42     <li></li>
43     <li></li>
44 </ul>
45 
46 </body>
47 </html>

思路：

首先找到所有的li元素，

然后给这里的li元素自定义属性值为true；//

 var aLi = document.getElementsByTagName('li');

如何给他们每个li都添加true呢？就是使用for循环来实现；

// for( var i=0; i<aLi.length; i++ )

同时我们希望看到点击后产生一定的效果，所有这里需要一个点击事件，每个li都会有点击事件，所以有onclick这样一个事件

// 在循环体内：

aLi[i].onclick = function (){}

点击之后呢？点击之后我们来进行判断（所以需要if...else...语句）。如果判断结果是true执行相应的语言，然后改变其布尔值；用于下次判断；

其实从解决问题的思路来看，实际上应该是解决什么问题？问题就是希望点击li列表，产生不同的效果

那么如何产生不同的效果呢？通过判断

那通过什么来判断呢？通过布尔值，布尔值从何而来？从自定义属性而来

自定义属性如何添加？通过for循环

这样一个倒推的关系来催出解决方案；