Question

我正在编写我的第一个jQuery插件，但是我遇到了一些问题。在我的第一次尝试中，我成功实现了基本插件，但现在我需要公开其他方法供客户端使用。

经过大量文章，stackoverflow发布和阅读文档后，我认为我可以创建一个对象并将其存储在元素.data（）缓存中。但是，当我调用我的插件时，我写的代码似乎引用了同一个对象。

不可否认，我仍然处于jQuery的学习阶段，所以我的术语缺乏，谷歌也无法为我提供帮助。

var CONST_TEST_KEY = "test-data-key";

(function($){
var TestObject = function(e, o){
    var elem = $(e);

    this.random = Math.floor(Math.random() * 100);

    this.GetRandom = function() {
        alert(this.random);
    }
};

$.fn.testJQueryPlugin = function(o) {
        return $.each(function() {
            var currentElement = $(this);

            if(currentElement.data(CONST_TEST_KEY))
                return;

            currentElement.data(CONST_TEST_KEY, new TestObject(currentElement, {}));
        });
};
 })(jQuery)

HTML：

<script type="text/javascript">
    $(document).ready(function() {
        var object1 = $("#entry1").testJQueryPlugin();
        var object2 = $("#entry2").testJQueryPlugin();

        alert($(object1).data(CONST_TEST_KEY).random);
        alert($(object2).data(CONST_TEST_KEY).random);
    });
</script>
 </head>
 <body>
  <div id="entry1">
      x
  </div>
  <div id="entry2">
     y
  </div>
 </body>

此代码显示两个具有相同值的警报。我希望每个警报都有不同的值。我会很感激任何解决方案，指针，甚至更好地解释为什么它以这种方式工作和/或为什么我应该采用不同的方式。

Answer 1

问题是您对each()的调用缺少参数。第一个参数是要迭代的集合，第二个参数是要调用的函数。

它应该是这样的：

$.fn.testJQueryPlugin = function(o) {
    return $.each(this, function() {
        var currentElement = $(this);

        if(currentElement.data(CONST_TEST_KEY))
            return;

        currentElement.data(CONST_TEST_KEY, new TestObject(currentElement, {}));
    });
};

see it in action at JSFiddle

Answer 2

我看到的至少一个直接问题出在你each()的电话中。看起来你正在混淆jQuery.each()（通用迭代器函数）和.each()。你甚至没有将正确的第一个参数传递给jQuery.each()，所以它不会迭代你的想法。试试这个尺寸：

http://jsfiddle.net/mattball/xaydr/

（还包括一些其他清理，例如使用return this;提供正确的链接）

自定义jQuery插件，公开方法和存储元素信息

2 个答案: