3

それぞれ名前と画像を含む MapIcon でいっぱいの配列があります。

配列は mapIcon と呼ばれます。

各インスタンスを個別に定義するときに機能するこれら 3 つの関数がありますが、ユーザーがどの画像をクリックしたかを判断する 1 つの関数にしようとすると、問題が発生します。

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

マップをクリックすると、gameplayScreen に移動し、もう一度クリックすると、これらの機能のように元に戻ります。

forループを使用し、クリックのためにそれを反復することに関係があると思いますが、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

試す

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

スコープの問題をクリアする必要があります

于 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 に答える