Javascript参数被覆盖 - Jquery

时间:2015-03-31 16:44:11

标签: javascript jquery javascript-events parameter-passing

我的代码类似于:

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
}

问题在于,当用户点击其中一个$ btn时,“options”中的所有字段始终是嵌套循环中的最后一个(即当i = imageData.length - 1且j = sizes.length时 - 1)。 #

奇怪的是,传入的$ image是正确的!

为什么会这样?我该如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

在for循环中,'options'包含映射

preview: $preview, 

意味着存储在“选项”中的名称只是“预览”。所以你需要以

的形式访问预览
e.data.options.preview

而不是

e.data.options.$preview

答案 1 :(得分:0)

以下是我设法做的快速解决方法:

而不是:

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

我这样做了:

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

我相信这会复制“选项”而不是传递实际变量。

欢迎提供更好,更详细的答案!