Javascript 参数被覆盖

Question

I have code similar to this:

for (i = 0; i < imageData.length; i++) {

    for (j = 0; j < sizes.length; j++){
        width = sizes[j][0];
        height = sizes[j][1];

        objectId = 'cropper-' + i + '-' + j;
        var $image = $('#' + cropperId + ' > img'),
            $preview = $('#preview_cropper-' + i + '-' + j),
            $btn = $('strict-mode_cropper-' + i + '-' + j);

        var options = {
            ...
            width: width,
            height: height,
            $preview: $preview, 
            ...
        };
        $btn.on("click", {$image: $image, options: options}, foo);
    }
}


function foo(e) {
    var $image = e.data.$image; // Gives the correct Image
    var $preview = e.data.options.$preview // Always the last $preview. Not the one that was passed in!
    var width = e.data.options.width //Also incorrect
    var height = e.data.options.height //Also incorrect
}

The issue is that when the user clicks on one of the $btn , all the fields in "options" is always the last one of the nested loop (ie when i = imageData.length - 1 and j = sizes.length - 1). #

Oddly enough though, the $image passed in is correct!

Why is this happening? How can I fix this issue?

Answer 1

In the for loop, 'options' contains the mapping

preview: $preview, 

meaning that the name stored in 'options' is just 'preview'. So you need to access preview as

e.data.options.preview

rather than

e.data.options.$preview

Answer 2

Here is a quick fix that I managed to do:

Instead of :

$btn.on("click", {$image: $image, options: options}, foo);

I did this:

$btn.on("click", {$image: $image, options: $.extend({},options)}, foo);

I believe this make a copy of "options" rather than pass the actual variable.

Better and more detailed answers are welcome!