All geek questions in one place

Sharing a shared variable between event handlers in jQuery

I have the following index.html, there I have two sections of section 1 and section 2, as shown in the screenshot

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>

In Index.html I use my own custom jQuery plugin "updateCommonVar", the definition for the plugin is present in 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 );

I pass the value of the commonVar variable as "1" from index.html for the section, I bind an event handler for each add sub button and show in the plugin definition, here I want

when you click the add button: the variable I passed commonVar to increase by 1. when you click the button: the variable I passed commonVar to be deccremented by 1. when you click the add button: the variable i passed to commonVar should be displayed in the span tag with the showVal class.

First I clicked the Add button, and then I clicked the Show button, but still I got the commonVar value as 1 not the expected value of 2 . I'm not sure about passing a shared variable between event handlers. Please help me with this. Thanks in advance for any help.

I expect the same behavior for section2, but still I got what I got for the note of section 1: section 2 is independent of section 1.

Wednesday for the same: http://jsfiddle.net/shmdhussain/PXYAh/1/

+4
source share
1 answer

You need to pass the whole object to your click processing functions, I did it as a param, called ref, as its link to the object.

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}); });
+2
source

Source: https://habr.com/ru/post/1499669/

More articles:


All Articles