Issue with passing values in JQUERY functions

Question

With some help I have written in JQUERY this:

   $('id').clickToggle(addMarker, destroyMarker);

where clickToggle is a function which calls addMarker and destroyMarker functions.

This is the clickToggle() function:

 $.fn.clickToggle = function(func1, func2) {

        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };

And addMarker() function is

var addMarker = function(){ ....}

I don't have so much xp in JQUERY. What I want to do is to pass a variable inside the addMarker() function. The way my code is written how can I do it?

Thanks for the answer! The variable is defined outside the clickToggle() function. Like this: var id = x; $('#'+id).clickToggle(addMarker, destroyMarker); — user1919
– user1919, Commented Feb 26, 2015 at 12:04

kasper Taeymans · Accepted Answer · 2015-02-26 12:22:07Z

1

A demo will be very handy here:

jsfiddle demo

HTML

<div id="myid">click me</div>

Javascript/jquery

 $.fn.clickToggle = function(func1, func2) {

        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
//lets pass the strings "world" and "foo" to addMarker and destroyMarker 
$('#myid').clickToggle(function(){addMarker("world")}, function(){destroyMarker("foo")});

//pass a variable as a parameter to the functions    
var addMarker = function(x){ alert("addmarker "+x)}
var destroyMarker= function(x){alert("removemarker "+x)}

edited Feb 26, 2015 at 12:22

answered Feb 26, 2015 at 12:08

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kasper Taeymans Over a year ago

I had a typo in the code example. It is fixed now :-)

user1919 Over a year ago

Thanks but it doesn't seem to work. Nothing is alerted!

kasper Taeymans Over a year ago

It should work, It is working on my PC (using firefox) so it should work on yours too.

user1919 Over a year ago

Yeah. Strange. Instead of the div id I have an image id. It should have the same result.

kasper Taeymans Over a year ago

What do you mean with image id? The code I posted is the same as in the Jsfiddle except for the comments.

|

Omri Aharon · Accepted Answer · 2015-02-26 12:11:23Z

1

If you're using a global variable, you can do it like this:

var x = 5;

$.fn.clickToggle = function(func1, func2) {

        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            funcs[tc].call(this, x);
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };

$('id').clickToggle(addMarker, destroyMarker);

Fiddle

answered Feb 26, 2015 at 12:11

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

5 Comments

user1919 Over a year ago

Thanks for the answer. But how do I pass then the x variable into the addMarker function()?

Omri Aharon Over a year ago

@dkar Here: funcs[tc].call(this, x);. The call allows you to pass parameters, which is what x is doing there after the this variable.

kasper Taeymans Over a year ago

Using global variables is not recommended when not necessary.

Omri Aharon Over a year ago

@kasperTaeymans True, but sometimes you can't change your code and just have to make do.

Omri Aharon Over a year ago

@dkar Read about the .call() function here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Issue with passing values in JQUERY functions

2 Answers 2

7 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related