4

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

在此处输入图像描述

索引.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”传递给这两个部分，我为每个按钮添加子绑定事件处理程序并在插件定义中显示，这里我想要的是

单击添加按钮：我传递的变量 commonVar 增加 1。单击子按钮：我传递的变量 commonVar 减少 1。单击添加按钮：我传递的变量 commonVar 将显示在具有“showVal”类的 span 标签。

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

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

小提琴相同：http: //jsfiddle.net/shmdhussain/PXYah/1/

4

1 回答 1

2

您需要将整个对象传递给您的点击处理函数，我将其作为一个名为 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});
});
于 2013-08-29T17:59:31.787 回答