Question

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

enter image description here

的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的值传递给index.html作为“1”，我为每个按钮添加sub绑定事件处理程序并在插件定义中显示，这里我想要的是

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

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

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

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

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

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

1 个答案: