0

我正在尝试设计一个滑块。这是代码。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");
   })
})

})
4

3 回答 3

1

这是因为top是一个预先存在的对象。您没有使用var关键字来声明它，因此您只是将值分配给现有对象。

改变：

top=event.pageY-minY;

到：

var top=event.pageY-minY;

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

于 2013-07-22T12:14:26.150 回答
0

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

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

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

于 2013-07-22T12:15:12.240 回答
0

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

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

var top=event.pageY-minY;

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

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

于 2013-07-22T12:16:53.970 回答