代码之家 › 专栏 › 技术社区 › Skyler

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

jquery-plugins jquery

Skyler · 技术社区 · 15 年前

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

在阅读了大量文章、stackoverflow文章和文档之后,我认为我可以创建一个对象并将其存储在element.data()缓存中。但是,我编写的代码在调用插件时似乎引用了相同的对象。

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>

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

2 回复 | 直到 15 年前

Matt Ball 15 年前

我看到至少有一个紧急问题是 each() . 看起来你正在混淆 jQuery.each() .each() . 你连第一个论点都没有 每个()) ,所以它不是在重复你认为它是什么。请试穿以下尺码:

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

return this; )

Lee 15 年前

问题是你打电话给 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

推荐文章

Ravindra Bhanderi · 如何在Laravel的CKEditor中上载图像,并在服务器端上载图像

8 年前

Hello Folks · jQuery可调整大小的插件游标损坏

8 年前

Vanjith · jQuery jqplot-如何创建标签的多行

8 年前

Joshua Paul Barnard · 使用append在jQuery插件中创建覆盖

8 年前

Abilash Erikson · 如何在前端拍摄包含用户上传图像的div的截图?

9 年前

Jiga · 如何使用jQuery插件制作一个小时倒计时计时器

9 年前

g5wx · 初始化后更新jQuery插件设置

9 年前

prabha · 直接在网站中打开和编辑csv文件

9 年前

John · 如何定义jQuery validate setDefaults

9 年前

Sandeep Maharjan · 如何在Jquery验证插件中使用ajaxUserCall函数

9 年前