Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You need to create a new variable on each pass through the loop, so that it'll get captured in the closures you're creating for the event handlers.</p> <p>However, merely moving the variable declaration into the loop won't accomplish this, because <a href="https://stackoverflow.com/questions/61552/are-there-legitimate-uses-for-javascripts-with-statement/185283#185283">JavaScript doesn't introduce a new scope for arbitrary blocks</a>.</p> <p>One easy way to force the introduction of a new scope is to use another anonymous function:</p> <pre><code>for (var i=0;i&lt;inlineRangeNavUrls.length;i++) { curDiv='#' + inlineRangeNavUrls[i][1]; if ($(curDiv).length) { (function(curTab) { $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} ); $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} ); })(inlineRangeNavUrls[i][0]); // pass as argument to anonymous function - this will introduce a new scope } } </code></pre> <p><a href="https://stackoverflow.com/questions/1203876/how-to-pass-a-variable-by-value-to-an-anonymous-javascript-function/1203917#1203917">As Jason suggests</a>, you can actually clean this up quite a bit using jQuery's built-in <a href="http://docs.jquery.com/Events/hover" rel="nofollow noreferrer"><code>hover()</code></a> function:</p> <pre><code>for (var i=0;i&lt;inlineRangeNavUrls.length;i++) { (function(curTab) // introduce a new scope { $('#' + inlineRangeNavUrls[i][1]) .hover( function(){showHideRangeSlidingTabs(curTab, true);}, function(){showHideRangeSlidingTabs(curTab, false);} ); // establish per-loop variable by passsing as argument to anonymous function })(inlineRangeNavUrls[i][0]); } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload