將3個點擊函數合併爲1 jquery

我有一個包含MapIcon的數組，每個數組都包含一個名稱和一個圖像。將3個點擊函數合併爲1 jquery

該數組被稱爲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(); 
    }); 
});

我想在地圖上點擊，然後把它帶我去gameplayScreen，然後再次單擊帶我回喜歡這些功能做。

我認爲這與使用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); 
      }); 
     }); 
}

來源

2012-10-26 Ryan M

讀http://stackoverflow.com/questions/10131647/binding-listeners-for-loop-variable-scope-miscomprehension –

你如何填充數組？ – sbonkosky

嘗試

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

應該清除scope issues

來源

2012-10-26 21:40:54

我嘗試了這兩個選項，結果幾乎相同。它現在認識到我點擊了一張地圖，但只是在沒有被點擊並追加到gameplayScreen的所需地圖中淡出而淡出。我會一直搞亂它的。至少你們已經幫助我進一步了。我發誓我嘗試了一個臨時變量來保持它的範圍，它不會工作。如果你有任何想法，爲什麼它可能不會在正確的屏幕上消失，讓我知道。 –

其實，我想我知道它爲什麼不能正常工作...... sorta。當item被mapIcon [i]填充時，它已經有了一個值，這可能與我點擊屏幕的結果不同。例如，如果它充滿了castle.png，並且我點擊了應該加載forest.png（mapIcon的實例2）的森林地圖，它將如何知道？有沒有辦法在我選擇的地圖上加載點擊它？我很難解釋我在問什麼，但我需要點擊一張地圖，然後讓它將該地圖加載到gameplayScreen，而不是執行mapIcon [0] .. [1] .. [2]。我認爲它不會達到1或2。 –

嘗試單獨定義您的處理程序，然後分配給它：

$(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-26 22:08:55 pete

將3個點擊函數合併爲1 jquery

回答

相關問題