For in Javascript: alway return the same value

Asked Apr 27 '17 at 06:54

Active Apr 27 '17 at 07:08

Viewed 52 times

I have a List menu like this:

And i want to generate [li] from my data. I use a Javascript function:

for (i = 0; i < 10; i++) {
    var sidebar = $('#side_bar');
    var sidebar_entry = $('<li/>', {
    'html': (i+1),
    'click': function() {
      alert("Li "+i)
    },
    'mouseenter': function() {
      $(this).css('color', 'red');
    },
    'mouseleave': function() {
      $(this).css('color', '#999999');
    }
    }).appendTo(sidebar);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="sidebar-nav" id="side_bar">
  <li class="sidebar-brand" style="font-weight: bold; color: #999999;">
    <h1>Places</h1>
  </li>
  <hr>
</ul>

But in result, all [li]'s click return alert(Li 9).

Why is it?

edited Apr 27 '17 at 06:56

Rajesh

24,354
5
48
79

asked Apr 27 '17 at 06:54

TonyBui

4

because by the time the click event is called, `i` will be 9 ... lookup closures – Jaromanda X Apr 27 '17 at 06:54
2

quick and dirty fix - `for (i = 0; i < 10; i++) { (function(i) {` your current loop body `})(i); }` – Jaromanda X Apr 27 '17 at 06:56
You can also look into `this.innerHTML` – Rajesh Apr 27 '17 at 06:57
@Rajesh - what!? – Jaromanda X Apr 27 '17 at 06:58
@JaromandaX He is setting number as HTML, you he can access value from html as well. [Sample](https://jsfiddle.net/ygb8sa7d/) – Rajesh Apr 27 '17 at 07:00

For in Javascript: alway return the same value

0 Answers0