JS做农场系列（三）：植物在相应土地上生长的实现

JS做农场系列（三）：植物在相应土地上生长的实现

 

今天所做的功能是：

①整理提取CSS样式；②种子包默认种子两颗；③给每块土地添加鼠标点击事件；④植物的定时器生长。

 

碰到的问题：当携带种子点击可种植的空地时触发当前土地上的种子生长计时器，但是在页面加载初始化土地的时候，添加点击事件是在循环中。外部参数oDiv“当前的土地”时刻在改变，循环结束是最后一块土地对象。但是我需要的是点击某块土地就触发某块土地上的事件。

 

解决方案：绑定事件的时候运用闭包，调用外部参数oDiv

 

采用闭包

// 闭包方法*************** 
function  Closure(oDiv) {
     // 要调用外部的oDiv参数
     return   function () {
         // 如果可以播种
         if  (seedObject  !=   null   &&  seedObject.isCanSow  &&  seedCount  >   0 ) {
            seedObject.sowSeed(oDiv);
        }
         else  {
            alert( " 对不起，没有种子无法播种！ " );
        }
    }
}

// ************************************************************
// 初始化土地（无缝拼接）,【第一个div的left、top , 土地一行个数，土地一列个数】
function  initMap(left, top, row, col) {
     var  l  =  left;  // 第一块土地的left
     var  t  =  top;   // 第一块土地的top
     var  landID  =   0 ;  // 土地标识

     // 循环列,创建每列的土地
     for  ( var  j  =   0 ; j  <  col; j ++ ) {
         // 循环行,创建每行的土地
         for  ( var  i  =   0 ; i  <  row; i ++ ) {
             var  oDiv  =  document.createElement( " div " );
            landID ++ ;
            oDiv.setAttribute( " id " ,  " land "   +  landID);
            oDiv.style.width  =   200 ;
            oDiv.style.height  =   100 ;
            oDiv.style.position  =   " absolute " ;
            oDiv.style.left  =  left;
            oDiv.style.top  =  top;
            oDiv.style.background  =   " url('http://images.cnblogs.com/cnblogs_com/meiqunfeng/农场/土地.png') " ;
             // 居中
            oDiv.style.lineHeight  =   100 ;
            oDiv.style.margin  =   " 0px auto " ;
            oDiv.style.textAlign  =   " center " ;
            oDiv.style.verticalAlign  =   " middle " ;

             // 循环给每一块土地绑定事件（这里是一个闭包，需要调用外部参数“当前的土地”,这个oDiv并不是固定的，他是随循环的运行在变）
            oDiv.onmousedown  =  Closure(oDiv);

            document.getElementById( " map " ).appendChild(oDiv);

            left  +=   100 ; top  +=   50 ;
        }
         // 创建第二行土地的时候，注意第二行土地的第一个left和top
        left  =  l  -   100 ;
        top  =  t  +   50 ;
    }
}

 

===================

 

• 
• 

• 
• 
• 
• 

 

下面的例子更详细更好的解决了:

代码

< body >
< ul >
     < li > one </ li >
     < li > two </ li >
     < li > three </ li >
     < li > one </ li >
</ ul >
*/
    
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i  <  len  ; i++ ){
    lists[ i ].onmouseover  = function(){
         alert( i );    
    };
}

 

你会发现当鼠标移过每一个<li>元素时，总是弹出4，而不是我们期待的元素下标。

 

解决办法一：

解决办法一

var  lists  =  document.getElementsByTagName( ' li ' );
for  ( var  i  =   0 , len  =  lists.length; i  <  len; i ++ ) {
    ( function (index) {
        lists[index].onmouseover  =   function () {
            alert(index);
        };
    })(i);
}

 

 

解决办法二：

解决办法二

var  lists  =  document.getElementsByTagName( ' li ' );
for  ( var  i  =   0 , len  =  lists.length; i  <  len; i ++ ) {
    lists[i].$$index  =  i;     // 通过在Dom元素上绑定$$index属性记录下标
    lists[i].onmouseover  =   function () {
        alert( this .$$index);
    };
}

 

 

解决办法三：

解决办法三

function  eventListener(list, index) {
    list.onmouseover  =   function () {
        alert(index);
    };
}
var  lists  =  document.getElementsByTagName( ' li ' );
for  ( var  i  =   0 , len  =  lists.length; i  <  len; i ++ ) {
    eventListener(lists[i], i);
}

 

 

转载于:https://www.cnblogs.com/meiqunfeng/archive/2010/04/26/1721487.html