如何使用陣列項目，並使相應的跨度在做一個hang子手遊戲的html

Question

，我能夠讓用戶輸入一個單詞，我可以將它改成一個數組。現在我似乎不能採取這些數組值，並使它們顯示爲單獨的跨度。

var makeAlphabetArr; 
var $wordInput = $(wordInput); 
var x; 
var p = $('#wordInputArr'); 
var button = $('button'); 
var startGame = $('startGame'); 

button.click(function(){ 
    if (startGame){ 
console.log('it works'); 

設置一個變量與wordInput

userWord = $wordInput.val(); 
makeAlphabetArr(); 
spanValues(); 
} 
}); 

功能採取userWord和分裂成陣列

function makeAlphabetArr(){ 
x = userWord; 

把用戶輸入並將它分爲數組值

x = x.split(''); 
    console.log(x); 
    p.val(x).hide(); 
} 

Answer 1

你可以使用jQuery的each方法來循環通過陣列：

function makeAlphabetArr(){ 
    x = userWord; 
    x = x.split(''); 
    console.log(x); 
    $(x).each(function() { 
     p.append($('<span>').html(this)); 
     console.log(this); 
    }); 
} 

在循環內部，this將是用戶輸入的單詞的一個字母。

jquery each