3

我有一个充满 MapIcon 的数组，每个数组都包含一个名称和一个图像。

该数组称为 mapIcon。

我们有这三个函数在单独定义每个实例时起作用，但是当我尝试将它变成一个函数来确定用户点击哪个图像时，我遇到了一个问题。

mapIcon[0].click(function(){
    var selectedMap = ($('<img src="img/' + maps[0].image + '">'));
    gameplayScreen.append(selectedMap);
    mapSelectScreen.fadeOut(500, function() {
        gameplayScreen.fadeIn(500);
        gameplayScreen.show();
    });
});

mapIcon[1].click(function(){
    var selectedMap = ($('<img src="img/' + maps[1].image + '">'));
    gameplayScreen.append(selectedMap);
    mapSelectScreen.fadeOut(500, function() {
        gameplayScreen.fadeIn(500);
        gameplayScreen.show();
    });
});

mapIcon[2].click(function(){
    var selectedMap = ($('<img src="img/' + maps[2].image + '">'));
    gameplayScreen.append(selectedMap);
    mapSelectScreen.fadeOut(500, function() {
        gameplayScreen.fadeIn(500);
        gameplayScreen.show();
    });
});

gameplayScreen.click(function() {
    gameplayScreen.fadeOut(500, function() {
        mapSelectScreen.fadeIn(500);
        mapSelectScreen.show();
        gameplayScreen.empty();
    });
});

我想点击地图，然后让它把我带到游戏画面，然后再次点击把我带回来，就像这些功能一样。

我认为它与使用 for 循环并通过它进行迭代以进行点击 a'la 有关mapIcon[i].click(function(){/*foo*/})，但我无法让它工作。

我猜它不喜欢为.click. 有任何想法吗？这是目前对多合一功能的尝试。

for (i=0; i< mapIcon.length; i++){
    mapIcon[i].click(function(){
    var selectedMap = ($('<img src="img/' + mapIcon[i].image + '">'));
            gameplayScreen.append(selectedMap);
            mapSelectScreen.fadeOut(500, function() {
                gameplayScreen.fadeIn(500);
                gameplayScreen.show();
                console.log(mapIcon[i].name);
            });
        });
}
4

2 回答 2

1

Try

for (i=0; i< mapIcon.length; i++){
    (function(){
      var item = mapIcon[i];
      item.click(function(){
            var selectedMap = ($('<img src="img/' + item.image + '">'));
            gameplayScreen.append(selectedMap);
            mapSelectScreen.fadeOut(500, function() {
                gameplayScreen.fadeIn(500);
                gameplayScreen.show();
                console.log(item.name);
            });
        });
    })();
}

It should clear the scope issues

于 2012-10-26T21:40:54.773 回答
0

尝试单独定义您的处理程序，然后分配它：

$(document).ready(function () {
    'use strict';
    var i = 0,
        switchMap = function switchMap(e) {
            var selectedMap = $('<img />').attr({
                'src': 'img/' + this.image,
                'alt': this.name
            });
            gameplayScreen.append(selectedMap);
            mapSelectScreen.fadeOut(500, function () {
                gameplayScreen.fadeIn(500);
                gameplayScreen.show();
            });
        };
    for (i = 0; i < mapIcon.length; i += 1) {
        mapIcon[i].click(switchMap);
    }
    gameplayScreen.click(function () {
        gameplayScreen.fadeOut(500, function () {
            mapSelectScreen.fadeIn(500);
            mapSelectScreen.show();
            gameplayScreen.empty();
        });
    });
});
于 2012-10-26T22:08:55.260 回答