我有以下 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 中
我的脚本.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”，我绑定(bind)每个按钮的事件处理程序 add sub 并在插件定义中显示，这里我想要的是
单击添加按钮时:我传递的变量 commonVar 增加 1。
单击子按钮时:我通过 commonVar 的变量减 1。
单击添加按钮时:我传递的变量 commonVar 将显示在带有类“showVal”的 span 标记中。
首先我点击了添加按钮，然后我点击了显示按钮，但我仍然得到了 commonVar 的值作为
1 而不是预期值 2 。我不确定在事件处理程序之间传递公共(public)变量。请帮助我。在此先感谢您的帮助。我期待第 2 节的行为相同，但我仍然得到了第 1 节的结果 注意:第 2 节独立于第 1 节。
fiddle 相同: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});
});