模塊內部簡單的函數調用，拿到NaN，呵呵？

Question

這裏是我工作的模塊：

var FeatureRotator = (function($,global) { 
    var self = {}, 
     currentFeature = 0, 
     images = [], 
     imagePrefix = "/public/images/features/", 
     timer = null,   
     totalImages = 0, 
     initialFeature, 
     interval, 
     blendSpeed, 
     element = null, 
     img1 = null, 
     img2 = null; 

    function setVisibleImage(iid) { 
     $("#img1").attr('src',images[iid].src).css('opacity',1); 
     $("#img2").css('opacity',0); 
     $(".active").removeClass("active"); 
     $("#f"+iid).addClass("active"); 
    } 

    function setCurrentImage(id) { 
     currentFeature = id; 
     setVisibleImage(id); 
    } 

    function doHoverIn(position) { 
     if (currentFeature === position) { 
      self.pause(); 
     } else { 
      setCurrentImage(global.parseInt(position, 10)); 
      self.pause(); 
     } 
    } 

    function doHoverOut(position) { 
     self.unpause(); 
    } 

    self.init = function(options,callback) { 
     var i = 0, 
      tempImg = null; 

     interval = options.interval || 5000; 
     blendSpeed = options.blendSpeed || 500; 
     element = options.element; 
     initialFeature = options.initialFeature || 0; 
     img1 = $("<img/>").attr('id','img1'); 
     img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height); 

     $(element).append(img1).append(img2); 

     totalImages = $(".feature").size(); 

     for (i = 0;i < totalImages; i++) { 
      tempImg = new global.Image(); 
      tempImg.src = imagePrefix +"feature_" + i + ".png"; 
      images.push(tempImg); 


      $("#f"+i).css('background-image', 
          'url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")') 
        .hover(doHoverIn($(this).attr('position')) 
        , doHoverOut($(this).attr('position')) 
        ).attr('position',i); 
     } 

     setVisibleImage(initialFeature); 

     if (options.autoStart) { 
      self.start(); 
     } 
     if (callback !== null) { 
      callback(); 
     } 
    }; 

    function updateImage() {   
     var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2"; 
     var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1); 

     if (active === "#img1") { 
      $("#img2").attr('src',images[nextFeature].src);    
      $("#img2").fadeTo(blendSpeed, 1);    
      $("#img1").fadeTo(blendSpeed, 0); 
     } else { 
      $("#img1").attr('src',images[nextFeature].src);    
      $("#img1").fadeTo(blendSpeed, 1);    
      $("#img2").fadeTo(blendSpeed, 0); 
     } 

     $("#f"+currentFeature).removeClass("active"); 
     $("#f"+nextFeature).addClass("active"); 

     currentFeature = nextFeature; 
    } 



    self.start = function() { 
     currentFeature = initialFeature; 
     setVisibleImage(currentFeature); 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    };   

    self.pause = function() { 
     global.clearTimeout(timer); 
    }; 

    self.unpause = function() { 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    }; 


    return self; 
}(this.jQuery, this)); 

這裏是它是如何在頁面上使用：

<script type="text/javascript"> 
     // ... 

     $(function() { 
      FeatureRotator.init({ 
       interval:5000, 
       element:'#intro', 
       autoStart:true, 
       height:177, 
       blendSpeed:1000, 
       initialFeature:0 
      }); 
     }); 
    </script> 

的問題是，當setVisibleImage從init方法調用， iid的價值是NaN。當調用setVisibleImage函數時，我已經遍歷調試器並驗證'initialFeature'爲0，但是，值不會使它在那裏。

任何人都可以幫助我確定問題是什麼？我通過JSLint運行了代碼，並且它恢復了乾淨。

UPDATE

確定這裏是我更新的代碼，現在該功能除了衰落不工作，像正好翻轉到下一個，平穩了不褪色：

var FeatureRotator = (function($,global) { 
    var self = {}, 
     currentFeature = 0, 
     images = [], 
     imagePrefix = "/public/images/features/", 
     timer = null,   
     totalImages = 0, 
     initialFeature = 0, 
     interval, 
     blendSpeed; 


    function setVisibleImage(iid) { 
     $("#img1").attr('src',images[iid].src).css('opacity',1); 
     $("#img2").css('opacity',0); 
     $(".active").removeClass("active"); 
     $("#f"+iid).addClass("active"); 
    } 

    function setCurrentImage(id) { 
     currentFeature = id; 
     setVisibleImage(id); 
    } 

    function doHoverIn(obj) { 
     var position = global.parseInt(obj.target.attributes["position"].value,10); 

     if (currentFeature === position) { 
      self.pause(); 
     } else { 
      setCurrentImage(global.parseInt(position, 10)); 
      self.pause(); 
     } 
    } 

    function doHoverOut() { 
     self.unpause(); 
    } 

    self.init = function(options,callback) { 
     var i = 0, 
      tempImg = null, 
      element = null, 
      img1 = null, 
      img2 = null; 

     interval = options.interval || 5000; 
     blendSpeed = options.blendSpeed || 500; 
     element = options.element; 
     initialFeature = options.initialFeature || 0; 
     img1 = $("<img/>").attr('id','img1'); 
     img2 = $("<img/>").attr('id','img2').css('opacity','0').css('margin-top',-options.height); 

     $(element).append(img1).append(img2); 

     totalImages = $(".feature").size(); 

     for (i = 0;i < totalImages; i++) { 
      tempImg = new global.Image(); 
      tempImg.src = imagePrefix +"feature_" + i + ".png"; 
      images.push(tempImg); 


      $("#f"+i).css('background-image','url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")') 
        .hover(doHoverIn, doHoverOut) 
        .attr('position',i); 
     } 

     setVisibleImage(initialFeature); 

     if (options.autoStart) { 
      self.start(); 
     } 
     if (typeof callback === "function") { 
      callback(); 
     } 
    }; 

    function updateImage() {   
     var active = $("#img1").css('opacity') === 1 ? "#img1" : "#img2"; 
     var nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1); 

     if (active === "#img1") { 
      $("#img2").attr('src',images[nextFeature].src);    
      $("#img2").fadeTo(blendSpeed, 1);    
      $("#img1").fadeTo(blendSpeed, 0); 
     } else { 
      $("#img1").attr('src',images[nextFeature].src);    
      $("#img1").fadeTo(blendSpeed, 1);    
      $("#img2").fadeTo(blendSpeed, 0); 
     } 

     $("#f"+currentFeature).removeClass("active"); 
     $("#f"+nextFeature).addClass("active"); 

     currentFeature = nextFeature; 
    } 



    self.start = function() { 
     currentFeature = initialFeature; 
     setVisibleImage(currentFeature); 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    }; 

    self.stop = function() { 
     global.clearTimeout(timer); 
    }; 

    self.pause = function() { 
     global.clearTimeout(timer); 
    }; 

    self.unpause = function() { 
     timer = global.setInterval(function(){ 
      updateImage(); 
     }, interval); 
    }; 


    return self; 
}(this.jQuery, this)); 

Answer 1

既然你要NaN，我猜它實際上正在從這一行：

.hover(doHoverIn($(this).attr('position')) 

... WH ICH調用此：

setCurrentImage(global.parseInt(position, 10)); // note the parseInt() 

...調用該：

setVisibleImage(id); 

所以position傳遞給parseInt從$(this).attr('position')來了，這很可能是不能被解析成一個值號碼，所以你得到NaN。

在for語句塊的第一行檢出該屬性的值。

for (i = 0;i < totalImages; i++) { 
    console.log($(this).attr('position')); // verify the value of position 
    // ...