Question

I am trying to make each tr of a big table to toggle a div inside one of its td’s on click, here is what I’ve done:

for( i = 2 ; i < trLen; i++ ){
   var id = $("td.idout", "tr:eq(" + i + ")").text();
   $("tr:has(div#" + id + ")").click(function(){
       $("div #"+ id).toggle();
   });
}

I have each of the div’s id’s made the same as the entry (which is output in the selection referred by the var id above). I’ve tested each selection and they are all perfect. There must be something wrong with my logic because it just won’t work. It doesn’t do anything at all.

Answer 1

The var keyword declares function-scoped variables, opposed to block-scoped that you might’ve expected. So, you only have 1 id that’s shared by each iteration of the for loop. And, since the click function will be called after the loop has finished, id will always have the last value from the loop for this selector:

...function(){
    $("div#"+ id).toggle();
}...

You can fix this with an immediately-invoked function, which will enclose the variable for each iteration:

for( i = 2 ; i < trLen; i++ ) {
    (function () {
        var id = $("td.idout", "tr:eq(" + i + ")").text();
        ...
    })();
}

Or, eventually, you’ll be able to use the let keyword instead:

for( i = 2 ; i < trLen; i++ ) {
    let id = $("td.idout", "tr:eq(" + i + ")").text();
    ...
}