javascript – 在JQuery中的事件处理程序之间共享公共变量

2019年7月21日 138次阅读

我有以下index.html,我有两个部分第1部分和第2部分,如屏幕截图所示

的index.html

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <!--START: Adding of javaScript library -->
    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
    <!--END:   Adding of javaScript library-->
    <script>
    jQuery(document).ready(function() {
        jQuery('.mySectionOne').updateCommonVar({commonVar:1});
        jQuery('.mySectionTwo').updateCommonVar({commonVar:1});
    }); 
    </script>

</head>

<body>
<p>Section 1:</p>
    <div class="mySectionOne">
        <button class="add">add</button>        
        <button class="sub">sub</button>        
        <button class="show">show</button>  
        <p>The value of Common var in section one is:<span class="showVal"></span><p>
    </div>

<p>Section 2:</p>   
    <div class="mySectionTwo">
        <button class="add">add</button>        
        <button class="sub">sub</button>        
        <button class="show">show</button>  
        <p>The value of Common var in section two is:<span class="showVal"></span><p>
    </div>      
</body>

在Index.html中,我使用自己的自定义jQuery插件“updateCommonVar”,插件的定义出现在myscript.js中

myscript.js

(function( $) {
    $.fn.updateCommonVar = function (options) {
        var defaults= {
            commonVar:0,
        }
        var ParameterObject=  $.extend({}, defaults, options);
         this.each(function() {
                $(this).find("button.add").bind("click", {commonVar:ParameterObject.commonVar},fnAddOne);
                $(this).find("button.sub").bind("click", {commonVar:ParameterObject.commonVar},fnSubOne);
                $(this).find("button.show").bind("click",{commonVar:ParameterObject.commonVar},fnShow);
         });
         return this;  
    };

    function fnAddOne(e){
        e.data.commonVar++;     
    }
    function fnSubOne(e){
        e.data.commonVar--;
    }
    function fnShow(e){
        $(this).parent().find('.showVal').html(e.data.commonVar);
    }


})( jQuery );

我将index.html中的变量commonVar的值作为“1”传递给该节,我为每个按钮添加子绑定事件处理程序并在插件定义中显示,这里我想要的是

单击添加按钮：变量i传递commonVar增加1.
单击子按钮时：变量i传递给commonVar以减1.
单击添加按钮时：传递给commonVar的变量将显示在带有“showVal”类的span标记中.

首先我点击了添加按钮然后我点击了显示按钮,但我仍然得到commonVar的值为1而不是预期值2.我不确定在事件处理程序之间传递公共变量.请帮帮我.在此先感谢您的帮助.

我期待section2的相同行为,但我仍然得到了第1节注释的内容：第2节独立于第1节.

小提琴：http://jsfiddle.net/shmdhussain/PXYAh/1/

最佳答案 您需要将整个对象传递给您的单击处理函数,我将其作为一个名为ref的参数作为对象的引用.

JSFIDDLE

(function( $) {
    $.fn.updateCommonVar = function (options) {
        var defaults= {
            commonVar:0,
        }
        var ParameterObject=  $.extend({}, defaults, options);
         this.each(function() {
             $(this).find("button.add").bind("click", {ref:ParameterObject},fnAddOne);
             $(this).find("button.sub").bind("click", {ref:ParameterObject},fnSubOne);
             $(this).find("button.show").bind("click",{ref:ParameterObject},fnShow);
         });
         return this;  
    };

    function fnAddOne(e){
        console.log(e.data);
        e.data.ref.commonVar++;     
    }
    function fnSubOne(e){
        e.data.ref.commonVar--;
    }
    function fnShow(e){
                $(this).parent().find('.showVal').html(e.data.ref.commonVar);
    }


})( jQuery );
jQuery(document).ready(function() {
    jQuery('.mySectionOne').updateCommonVar({commonVar:1});
    jQuery('.mySectionTwo').updateCommonVar({commonVar:1});
});
点赞