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

这是因为top是pre-existing object。您没有使用var关键字来声明它，因此您只需将值分配给现有对象。

变化：

top=event.pageY-minY;

要：

var top=event.pageY-minY;

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

Answer 2

top属性返回当前窗口的最顶层浏览器窗口。这就是它返回对象的原因：http://www.w3schools.com/jsref/prop_win_top.asp

基本上你没有声明任何变量：minY，maxY和top。

所以在他们面前添加var或在准备好函数之前声明它们。

Answer 3

这是因为top已经被声明为window的属性（默认情况下，正如@ R-P所提到的那样）

要在函数内声明变量，请使用关键字var：

var top=event.pageY-minY;

top将在函数范围内声明，因此它们不会发生任何冲突。

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

添加两个变量的奇怪结果

3 个答案: