jquery-plugin中的全局变量或局部变量

栏目: jQuery · 发布时间: 7年前

内容简介:翻译自:https://stackoverflow.com/questions/8310285/global-or-local-variables-in-a-jquery-plugin
如何为 jquery

-plugin提供单独的局部变量,这些变量可以在不同的插件函数中访问?

我的脚本显示内容为“123”的警报,但我期待’abc’.所以变量’t’只存在一次而不是每个插件两次.因此,对于每个插件实例,应该还有一个变量’t’的实例.

<html>
<head>
<title></title>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    (function ($) {
        var t = null;
        $.fn.doSomething = function()
        {
            alert(t);
        }
        $.fn.myHtmlControl = function(option) {
            t = option;
        }
    })(jQuery);

    $(function () {
        $('#ctrl1').myHtmlControl("abc");
        $('#ctrl2').myHtmlControl("123");            
        $('#ctrl1').doSomething();
    })        
</script>

</head>
    <body>
        <div id='ctrl1'>Ctrl1</div>
        <div id='ctrl2'>Ctrl2</div>
    </body>
</html>
通常的方法是使用 data 函数存储与元素本身上的特定元素相关的信息.所以在你的情况下( live example ):
(function ($) {
    $.fn.doSomething = function()
    {
        alert(this.data("myHtmlControl"));
    }
    $.fn.myHtmlControl = function(option) {
        this.data("myHtmlControl", option);
    }
})(jQuery);

如果您需要存储多个选项,这是一个更强大的示例( live copy ):

(function ($) {
    var defaults = {
        msg1: "(msg1)",
        msg2: "(msg2)"
    };

    $.fn.doSomething1 = function()
    {
        alert(getOption(this, "msg1"));
        return this;
    }
    $.fn.doSomething2 = function()
    {
        alert(getOption(this, "msg2"));
        return this;
    }

    $.fn.myHtmlControl = function(options) {
        this.data("myHtmlControl", $.extend({}, defaults, options));
        return this;
    };

    function getOption(inst, name) {
        var obj = inst.data("myHtmlControl");
        return (obj || defaults)[name];
    }

    function setOption(inst, name, value) {
        var obj = inst.data("myHtmlControl");
        if (!obj) {
            obj = $.extend({}, defaults);
            inst.data("myHtmlControl", obj);
        }
        obj[name] = value;
    }
})(jQuery);
jQuery(function($) {

    $("#theButton").click(function() {
        $('#ctrl1').myHtmlControl({msg1: "abc"});
        $('#ctrl2').myHtmlControl({msg2: "123"});
        alert("about to do ctrl1");
        $('#ctrl1').doSomething1().doSomething2();
        alert("about to do ctrl2");
        $('#ctrl2').doSomething1().doSomething2();
    });

});

翻译自:https://stackoverflow.com/questions/8310285/global-or-local-variables-in-a-jquery-plugin


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Boolean Reasoning

Boolean Reasoning

Brown, Frank Markham / 2003-4 / $ 19.15

A systematic treatment of Boolean reasoning, this concise, newly revised edition combines the works of early logicians with recent investigations, including previously unpublished research results. Th......一起来看看 《Boolean Reasoning》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码