奇怪的結果加起來兩個變量

Question

我想設計一個滑塊。這是代碼。檢查控制檯日誌中的top變量的輸出。爲什麼它是一個對象而不是價值？！ http://jsfiddle.net/YtTFb/

<div class="filter_opt_slider"> 
    <div></div> 
</div> 

-

.filter_opt_slider{ 
    position: relative; 
    width: 3px; 
    margin:10px; 
    height: 150px; 
    border: 1px #E0E0E0 solid; 
    background: #FFF; 
    cursor: default; 
} 

-

$(document).ready(function(){ 

$(".filter_opt_slider div").on("mousedown",function(event){ 
    dragged=$(this); 
    minY=parseInt(dragged.parent().offset().top); 
    maxY=parseInt(dragged.parent().css("height"))+minY; 
    $(document).mousemove(function(event) { 

     if(event.pageY<=maxY && event.pageY>=minY){ 
      top=event.pageY-minY; 

      console.log("minY: "+minY); 
      console.log("pageY: "+event.pageY); 
      console.log("top: "+top); 
      console.log("<------------->") 

      dragged.css({top:top})     
     } 

    }); 
    $(document).on("mouseup",function(){ 
     $(document).unbind("mousemove") 
     .unbind("mouseup"); 
    }) 
}) 

}) 

Answer 1

這是因爲頂部已經被聲明爲window屬性（默認情況下，作爲@RP提到它）

要聲明一個變量函數內部，使用關鍵字var：

var top=event.pageY-minY; 

頂部將在函數的範圍內聲明，所以它們不會有任何衝突。

更新JSFIDDLE：http://jsfiddle.net/edi9999/YtTFb/2/

Answer 2

這是因爲top是pre-existing object。您沒有使用關鍵字var進行聲明，因此您只需將該值分配給現有對象。

變化：

top=event.pageY-minY; 

要：

var top=event.pageY-minY; 

http://jsfiddle.net/YtTFb/1/

Answer 3

Top屬性返回當前窗口的最頂層瀏覽器窗口。這就是爲什麼它返回對象：http://www.w3schools.com/jsref/prop_win_top.asp

基本上你沒有聲明任何變量：minY，maxY和top。

因此，在他們面前添加var或在ready函數之前聲明它們。