can not pass array value to a click function

Question

i plan to show some images on the page and when the user press up button some related new images will be shown. I have been achieving that by changing the "src" attribute already existing image html tag.

i have json data like [["a","b"],["c","d"]] which gives the name of images like a.jpg, b.jpeg etc.

Here is the problem i can not pass the array value to jquery click object. my javascript functions as below:

var a; // a global variable holding the json array [["a","b"],["c","d"]]

function rileri(){ //img next
var ix=parseInt($("#up").attr('rel'));
ix=(ix+1)%a.length; 
for(var i=0;i<2;i+=1){ 
   $("#k"+i).attr("src","img/m/t/"+a[ix][i]+".jpg"); 
   $("#k"+i).click(function() { rgetir(a[ix][i]);}); //problem is here!!
 }
$("#up").attr('rel',ix); // i keep index data of appearing img on "rel"
}

function rgetir(n){ //img down ajax
$("#brc").load("data/rgetir.php", {'name':n});
}

I wonder how can i bind click event and if there is any better solutions ?

html is like that (no "src" at start, is it ok ?):

<img id="k0"/><img id="k1"/>
<input id="up" rel="0" type="button" onclick="rileri()"  value="Next">

Yeap the main problem is passing the multidimensional array value to a function :(

if you add alert to this "rgetir(a[ix][i]);". What do you get? — Tx3
– Tx3, Commented Nov 19, 2011 at 22:00
It helps to have descriptive names for functions and variables. At least when you are trying to explain what your code does to people. — NullUserException
– NullUserException, Commented Nov 19, 2011 at 22:00
NullUserException ఠ_ఠ you are right, i need to correct them. — aliaktas
– aliaktas, Commented Nov 19, 2011 at 22:05
i tried for alert(rgetir(a[ix][i])); and alert(a[ix][i]) both gives "undefined" — aliaktas
– aliaktas, Commented Nov 19, 2011 at 22:06

JAAulde · Accepted Answer · 2011-11-19 23:48:08Z

2

The problem has nothing to do with "multidimensional arrays." It is that you are using i inside the assigned click value, and i changes with every iteration of the loop. Each assigned click value holds a reference to i, so when rileri is finished each points to the same value. You need to break the reference, usually done by passing i to a function and binding the click in there.

There are many flavors of using a function to break a reference, but since you're using jQuery and iterating an array, we'll use $.each:

(what follows is untested but should serve as an example)

function rileri(){
  var ix=parseInt($("#up").attr('rel'),10);
  ix=(ix+1)%a.length; 

  $.each(a[ix], function (i) {
    var img_name = this;

    $("#k"+i)
      .attr("src","img/m/t/"+img_name+".jpg")
      .click(function () {
        rgetir(img_name);
      });

      if (i >= 2)
      {
        return false;
      }
  });

  $("#up").attr('rel',ix);
}

edited Nov 19, 2011 at 23:48

answered Nov 19, 2011 at 22:55

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

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

4 Comments

aliaktas Over a year ago

that gives me a good vision, but somehow when i click an image it starts a infine loop and crash the IE and no response in Firefox. But it seems like a working code

aliaktas Over a year ago

@JAAulde 'this' in click binder refers to a html image object. i can not find the reason

JAAulde Over a year ago

@aliaktas I'm sorry, I forgot to grab a reference to this inside the each before using it in the bound click. I've edited the code sample for you.

aliaktas Over a year ago

the full solution is this one, however both helped a lot. thank you

Hogan · Accepted Answer · 2011-11-19 22:57:55Z

2

Here is a simple fiddle that shows your problem

http://jsfiddle.net/MHJx6/

The problem is your ix and i variables are closures, so at the time the event runs they have the wrong values as you can see in this example.

I tried to write some code that will do what I think you are trying to do below. It would be easier if I knew what you were trying to do (use case). Maybe this is what you want?

var a; // a global variable holding the json array [["a","b"],["c","d"]]

function rileri(){ //img next
   $("#k0").click(function() { handleClick(0); });
   $("#k1").click(function() { handleClick(1); });
}


function handleClick(index) {
  var ix=parseInt($("#up").attr('rel'));
  ix=(ix+1)%a.length; 

  $("#k"+index).attr("src","img/m/t/"+a[ix][index]+".jpg"); 

  $("#up").attr('rel',ix); 

}

edited Nov 19, 2011 at 22:57

answered Nov 19, 2011 at 22:08

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

5 Comments

aliaktas Over a year ago

the code is same however a[newImageIndex][index] should be imageArray[newImageIndex][index]. I thought that the code is very short and used the comments to explain what the function's purpose, however you both right in general

aliaktas Over a year ago

i saw data() functions on fb page, i will try to use it.

aliaktas Over a year ago

i need to bind a click event, the above code triggers the click and immediately call rgetir()

aliaktas Over a year ago

when i put a constant in rgetir(), it works but with an array element, no way!. finally i saw some sources mentionin about passing values or references problem, but i am not a coder guru. i am unable to solve the case

JAAulde Over a year ago

+1 you changed your answer to point to the correct problem as I was typing my answer.

Collectives™ on Stack Overflow

can not pass array value to a click function

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related