如何等待jquery-plugin（imagemapster）中的用戶交互？

Question

我已經建立了我的圖像映射與jQuery的插件mapster

的代碼顯示了我，哪些國家被點擊（ '1' 爲埃及， '2' Libyia ..）

$(document).ready(function() { 

    function geklickt (e){ 
    //alert(typeof e.key);  return string 
    $('.showme').append(e.key+ ' '); 
    } 


    $('img').mapster({ 
    mapKey: 'ALT', 
    stroke: true, 
    strokeWidth: 2, 
    strokeColor: 'ff0000' , 
    onConfigured: function(){ 
    // howto set up loop for asking user here??? 
    } , 
    onClick: geklickt 
    }); 
    }); 

我問題： 我想問用戶在不同的國家這樣一個循環： 「點擊埃及」

if (e.key == '1') 
    { 
    // message "Ok" 
    // add one point 
    } 
    else 
    { 
    // message "NOT Ok" 
    } 

「點擊突尼斯」 ......

我不知道如何編碼這個循環，以便用戶被要求爲第一個國家，然後程序等待，直到用戶點擊國家 ，然後用戶被問到第二個國家....

感謝

庫爾特

Answer 1

你並不需要一個循環。 JavaScript適用於事件驅動的操作，而不是「等待用戶輸入」。

保持國家名稱的數組（或對象），使用它們的預定義的鍵和使用這樣的結構，以提示用戶：

<div>Click on <span id="countryname"></span></div> 

然後使用JavaScript來動態地改變名稱顯示基於當前的關鍵。

例JS（未完成，但有必要的信息）：

var countryArray, currentKey; 
countryArray = []; 
/* 
* populate countryArray using keys like this 
* countryArray[key] = "Name"; 
*/ 
function setCountry(key){ 
    $("#countryname").text(countryArray[key]); 
} 

currentKey = 0; //can be set randomly or however you'd like 
setCountry(currentKey); 

function geklickt (e){ 
    if(currentKey == e.key){ 
     //success 
     //add one point 
     currentKey = newKey; //however you want to set it 
     setCountry(currentKey); 
    } else { 
     //failure 
     //message: "NOT OK" 
    } 
}