javascript - jQuery 插件仅适用于最后一个选择器

Question

为了学习更多 Javascript，我尝试创建一个 jQuery 插件来创建我自己的自定义滚动条。它一次只对一个滚动条有效，但如果我尝试对其中两个滚动条进行操作，则只有最后一个有效。

JSFiddle:http://jsfiddle.net/JoelCool/K4mW7/1/

我注意到 HandleMouseMove() 函数的第一个滚动条上的变量“scrolling”不是真的，所以看起来它可能是一个作用域？

HTML 滚动条测试 .滚动条{ 背景颜色:#ccc；边框:1px 纯黑色； float :左；position:relative；光标:指针； } .noSelect { 用户选择:无； -o-用户选择:无； -moz-用户选择:无； -khtml-用户选择:无； -webkit-用户选择:无； }

<div id="container" style="width:600px;height:300px;background-color:#ccc;overflow:hidden;position:relative;">
    <div id="content" style="background-color:blue;width:800px;height:283px;position:relative;left:0;">
        12345678901234567890123456789012345678901234567890
    </div>
    <div style="top:0;left:0;height:300px;width:100px;background-color:yellow;z-index:100;position:absolute;"></div>
    <div id="scroll-track-h" style="position:absolute;bottom:0;right:0;height:17px;width:500px;background-color:cyan;"></div>
    <div id="scroll-track-v" style="position:absolute;top:0;right:0;height:283px;width:17px;background-color:orange;"></div>
</div>
<br /><br />

<script src="jquery-2.1.0.min.js"></script>
<script src="scroller.js"></script>
<script>
    $('#scroll-track-v').scroller();
    $('#scroll-track-h').scroller();
    //$('#scroll-track-v, #scroll-track-h').scroller();
</script>

Javascript

(function( $ ) {
    $.fn.scroller = function( options ) {

    options = $.extend( $.fn.scroller.defaults, options );

    // Plugin code
    return this.each(function () {
        var $elem = $(this),
            scrolling = false,
            mouseStartPos = 0,
            barPos = 0,
            xy = $elem.width() > $elem.height() ? 'x' : 'y',    // x = horizontal, y = vertical
            trackLength = xy == 'x' ? $elem.width() : $elem.height(),
            barLength = (trackLength * options.barPct / 100) - 2,   // should make it figure out the border width
            travelLength = trackLength - barLength - 2;
        console.log($elem);
        var $bar = $('<div class="scroller-bar"></div>')
                    .width( xy == 'x' ? barLength : $elem.innerWidth() - 2)
                    .height( xy == 'x' ? $elem.innerHeight() - 2 : barLength);
        $elem.append($bar);

        $elem.on('mousedown', function (evt) {
            scrolling = true;
            $("body").addClass("noSelect"); // turn off text selection while scrolling
            mouseStartPos = xy == 'x' ? evt.pageX : evt.pageY;
            barPos = xy == 'x' ? $bar.position().left : $bar.position().top;
            $(document).on('mousemove', function (evt) { HandleMouseMove(evt); });
        });

        $(document).on('mouseup', function (evt) {
            if (scrolling) {
                $("body").removeClass("noSelect");
                $(document).off('mousemove');
                mouseStartPos = 0;
                scrolling = false;
            }
        });

        HandleMouseMove = function (evt) {
            console.log(scrolling);
            if (scrolling) {
                var mouseMovedBy = xy == 'x' ? evt.pageX - mouseStartPos : evt.pageY - mouseStartPos,
                    newBarPos = barPos + mouseMovedBy;
                if (newBarPos < 0) { newBarPos = 0; }
                if (newBarPos > travelLength) { newBarPos = travelLength; }
                $bar.css(xy == 'x' ? 'left' : 'top', newBarPos);
                var pct = newBarPos / travelLength;
            }
        }
    });
}

// Set up the default options.
$.fn.scroller.defaults = {
    barPct : 25,
    onScroll : null
};
})( jQuery );

$('#scroll-track-v').scroller();
$('#scroll-track-h').scroller();

我首先在垂直条上调用它，然后在水平条上调用它，并且只有水平条起作用。如果我切换它们，则只有垂直方向有效。

谁能给我一个线索？我这样做完全错了吗？

Answer 1

您的函数 HandleMouseMove() 未绑定(bind)到元素。它正在为“滚动” bool 值获取混合值。

我刚刚添加了 $elem。在函数名称之前。并将其设为 $elem.HandleMouseMove(event);

检查代码

(function( $ ) {
$.fn.scroller = function( options ) {

    options = $.extend( $.fn.scroller.defaults, options );

    // Plugin code
    return this.each(function () {
        var $elem = $(this),
            scrolling = false,
            mouseStartPos = 0,
            barPos = 0,
            xy = $elem.width() > $elem.height() ? 'x' : 'y',    // x = horizontal, y = vertical
            trackLength = xy == 'x' ? $elem.width() : $elem.height(),
            barLength = (trackLength * options.barPct / 100) - 2,   // should make it figure out the border width
            travelLength = trackLength - barLength - 2;
        console.log($elem);
        var $bar = $('<div class="scroller-bar"></div>')
                    .width( xy == 'x' ? barLength : $elem.innerWidth() - 2)
                    .height( xy == 'x' ? $elem.innerHeight() - 2 : barLength);
        $elem.append($bar);

        $elem.on('mousedown', function (evt) {
            scrolling = true;
            $("body").addClass("noSelect"); // turn off text selection while scrolling
            mouseStartPos = xy == 'x' ? evt.pageX : evt.pageY;
            barPos = xy == 'x' ? $bar.position().left : $bar.position().top;
            $(document).on('mousemove', function (evt) { $elem.HandleMouseMove(evt); });
        });

        $(document).on('mouseup', function (evt) {
            if (scrolling) {
                $("body").removeClass("noSelect");
                $(document).off('mousemove');
                mouseStartPos = 0;
                scrolling = false;
            }
        });

        $elem.HandleMouseMove = function (evt) {
            console.log(scrolling);
            if (scrolling) {
                var mouseMovedBy = xy == 'x' ? evt.pageX - mouseStartPos : evt.pageY - mouseStartPos,
                    newBarPos = barPos + mouseMovedBy;
                if (newBarPos < 0) { newBarPos = 0; }
                if (newBarPos > travelLength) { newBarPos = travelLength; }
                $bar.css(xy == 'x' ? 'left' : 'top', newBarPos);
                var pct = newBarPos / travelLength;
            }
        }
    });
}

// Set up the default options.
$.fn.scroller.defaults = {
    barPct : 25,
    onScroll : null
};

 })( jQuery );

    $('#scroll-track-v').scroller();
    $('#scroll-track-h').scroller();

检查更新的 jsfiddle http://jsfiddle.net/shinde87sagar/K4mW7/3/