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

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

javascript jquery

Javascript 在JQuery中的事件处理程序之间共享公共变量,javascript,jquery,Javascript,Jquery,我有下面的index.html，我有两个部分，第一部分和第二部分，如屏幕截图所示 Index.html <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head>  <script type="text/javascript" src="/jquery.min.js"></scr

我有下面的index.html，我有两个部分，第一部分和第二部分，如屏幕截图所示

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中的变量commonVar的值作为“1”传递给这两个部分，我为每个按钮add sub绑定事件处理程序，并在插件定义中显示，这里我想要的是

单击add按钮：我传递给commonVar的变量将递增1。单击子按钮：我传递给commonVar的变量将被减记为1。单击add按钮：我传递的commonVar变量将显示在带有类“showVal”的span标记中

首先我单击了add按钮，然后单击了show按钮，但是我仍然得到了commonVar的值

而不是预期的值

。我不确定是否在事件处理程序之间传递公共变量。请帮我做这件事。提前感谢您的帮助

我期望第2节也有同样的行为，但我还是得到了第1节的结果注：第2节独立于第1节

同样的：你需要将整个对象传递给你的点击处理函数，我把它作为一个名为ref的参数，作为对对象的引用

谢谢你的回答。它正在工作。这背后的概念是什么？@MohamedHussain这是一个奇怪的范围问题。与之前一样，您没有在$.fn.updateCommonVar作用域中授予函数对ParameterObject的访问权，只授予其commonVar属性，但您需要访问该对象才能更改其在$.fn.updateCommonVar作用域中的属性。

(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 );

(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});
});