Javascript 将3个单击函数合并为1个jquery

我有一个满是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（i=0；i

---

它应该清除

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

$(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();
        });
    });
});

$（文档）.ready（函数（）{
"严格使用",；
var i=0，
开关映射=功能开关映射（e）{
var selectedMap=$（“阅读你是如何填充数组的？我尝试了这两个选项，结果几乎相同。它现在意识到我正在点击一个地图，但只是淡出而没有淡出所需的地图，该地图被点击并附加到游戏屏幕上。我会继续搞乱它。你们至少帮了我一步t、 我发誓我尝试了一个临时变量来将其保持在范围内，但它不起作用。如果您有任何想法，为什么它不会在正确的屏幕中淡出，请告诉我。实际上，我想我知道它为什么不能正常工作…sorta。当项目被mapIcon[I]填充时，它已经有了一个值，这可能与我在屏幕上单击的结果不同。例如，如果它填充了castle.png，我单击应该加载forest.png的森林地图（mapIcon的实例2），它怎么知道？有没有一种方法可以通过单击来加载我选择的地图？很难解释我的要求，但我需要单击地图，让它将地图加载到gameplayScreen，而不是执行mapIcon[0]..[1]..[2]。我认为它不会达到1或2。
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);
            });
        });
    })();
}

$(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();
        });
    });
});