Push 方法只能工作一次，除非之前使用过变量

发布于 2024-08-23 15:03:18 字数 1315 浏览 5 评论 0原文

这可能是一个奇怪的问题。无论如何，我正在开发一个 jQuery 插件，这是针对这个问题的一段有用的代码，请注意，这并不是全部；）：

Javascript：

(function($){
    $.fn.newPlugin = function(){
        var ranges = [], selectableRange = this;

        function init(){
            selectableRange.live('mousedown', function(){
                selectableRange.live('mouseup', function(){
                    addRange(Math.random(), Math.random());
                    selectableRange.die('mouseup');
                });
            });
        }

        function addRange(a, b){
            // console.log(ranges);
            ranges.push({start: Math.min(a,b), end: Math.max(a,b)});
            console.log(ranges);
        }

        return { init: init };
    };
})(jQuery);

$(document).ready(function(){
    var instance = $('#element').newPlugin();
    instance.init();
});

HTML：

 <div id="element" style="width:200px;height:200px;background:grey;"> </div>

它所做的似乎没什么用；无论如何，每次有人将鼠标放在某个元素上然后再向上移动时，都会将一个新对象添加到范围的后面。不幸的是，在我的控制台中，范围数组仅包含一个对象，无论点击$('#element')多少次。

我试图弄清楚发生了什么，并在将对象推到范围数组的后面之前取消注释行 console.log(ranges); 。然后，令人惊讶的是，它起作用了。范围数组增长了...

有人可以告诉我为什么这个 .push 仅在之前使用过 ranges 时才有效吗？

原文

This might be a weird question. Anyway, I'm working on a jQuery plugin and this is a useful piece of code for this question, note that it's not all ;) :

Javascript:

(function($){
    $.fn.newPlugin = function(){
        var ranges = [], selectableRange = this;

        function init(){
            selectableRange.live('mousedown', function(){
                selectableRange.live('mouseup', function(){
                    addRange(Math.random(), Math.random());
                    selectableRange.die('mouseup');
                });
            });
        }

        function addRange(a, b){
            // console.log(ranges);
            ranges.push({start: Math.min(a,b), end: Math.max(a,b)});
            console.log(ranges);
        }

        return { init: init };
    };
})(jQuery);

$(document).ready(function(){
    var instance = $('#element').newPlugin();
    instance.init();
});

HTML:

 <div id="element" style="width:200px;height:200px;background:grey;"> </div>

What it does seems pretty useless; anyway, every time someone puts his mouse down and then up on an element, a new object is added to the back of ranges. Unfortunately, in my console the ranges array contains only one object, no matter how many times is clicked on $('#element').

I tried to figure out what was going on and uncommented the line console.log(ranges); before an object was pushed to the back of the ranges array. Then, surprisingly, it worked. The ranges array grew...

Can somebody tell me why this .push only works when ranges is used before?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍白女子 2024-08-30 15:03:19

我很难理解你想在这里做什么。这个返回值是什么意思？

我唯一能想到的是，您真正想做的是在定义插件时运行一个函数，以便该函数本身返回将实现该插件的实际函数。事实上，在我看来，数组中只有一个元素的原因是每次调用插件时都会创建一个新数组。看起来您正在尝试创建一个闭包，但没有函数调用，因此未创建闭包。

尝试更改您的插件定义：

$.fn.newPlugin = (function() {
   // ...
   // all the code you currently have, though I still don't know
   // exactly what that return value is supposed to mean
   // ...
})();

I'm having a hard time understanding what it is you're trying to do here. What is that return value supposed to mean?

The only thing I can think of is that what you're really trying to do is run a function at the time your plugin is defined, such that that function itself returns the actual function that'll implement the plugin. As it is, it looks to me as if the reason your array only has one element in it is that a new array is created every time you call the plugin. It looks like you're trying to create a closure, but there's no function call so the closure isn't made.

Try changing your plugin definition:

$.fn.newPlugin = (function() {
   // ...
   // all the code you currently have, though I still don't know
   // exactly what that return value is supposed to mean
   // ...
})();

回复收藏 0 原文