可从jQuery中的闭包访问可变变量

Question

I know this is probably "double-posted". But I am not able to assign the solutions to my problem.

I have 6 fileupload input fields. Whenever they change, I wanna alert "Changed!". I want to iterate through thoes 6 fileupload id's with a for-loop. Now, it gives me the error on variable i "Mutable variable is accessible from closure". I saw some solutions for this. But I'm not able to use these solutions for my problem.

function fileUploadCheck() {
    for (var i = 1; i <= 6; i++) {
        $("document").ready(function () {
            $("#SOMEID"+i).change(function () {
                alert('changed!');
            });
        });
    }
}

Answer 1

jQuery uses implicit iteration . You don't have to loop manually.

$("input[type=file]").change(function(event) {
  // check your console to see the value of `this`
  console.log(this, "changed");
});

---

From the jQuery .each docs

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration . When this occurs, it is often unnecessary to explicitly iterate with the .each() method:

// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});

// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

---

Regarding your "Mutable variable is accesible from closure", see this simplified example

for (var i=1; i<=6; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 777777
// ALL SEVENS? WTF

The reason for that is, the closure depends on i , but i is changing outside of the closure. By the time any function is run, i has already set to 7 , so the logged output for each function is 7 .

If you use the method I have above, you won't have to worry about this at all. If you are still curious how you would fix this, please see

for (var i=1, fn; i<=6; i++) {

  fn = (function(n) {
    console.log(n);
  })(i);

  setTimeout(fn, 100);
}

// 123456
// YAY

Now each function is properly "bound" with an immutable i input; meaning the value of i will not change inside of the closure-wrapped function. Check out Function.prototype.bind if you're interested in shortcuts ^.^