javascript - 我可以使数组列表适应 HTML 吗？

Question

我目前正在创建一个拼写游戏，您可以将字母拖放到相应的单词上。目前，我在动态生成网格的数组列表中有一个单词列表。

问题是当需要在游戏中添加新词时，他们必须通过 HTML 添加，因为办公室的那一边不熟悉 JavaScript/JQuery，也不愿意学习。

最好的方法是什么？

有没有一种方法可以让他们通过 HTML 向脚本中的数组添加内容？

这是我目前的脚本...

var listOfWords = new Array();

listOfWords['mat'] = 'http://www.wav-sounds.com/cartoon/daffyduck1.wav';
listOfWords['cat'] = 'http://www.wav-sounds.com/cartoon/porkypig1.wav';
listOfWords['dog'] = 'http://www.wav-sounds.com/cartoon/bugsbunny1.wav';
listOfWords['pit'] = 'http://www.wav-sounds.com/cartoon/daffyduck1.wav';
listOfWords['pot'] = 'http://www.wav-sounds.com/cartoon/porkypig1.wav';
listOfWords['fog'] = 'http://www.wav-sounds.com/cartoon/daffyduck1.wav';
listOfWords['log'] = 'http://www.wav-sounds.com/cartoon/porkypig1.wav';
listOfWords['pan'] = 'http://www.wav-sounds.com/cartoon/bugsbunny1.wav';
listOfWords['can'] = 'http://www.wav-sounds.com/cartoon/bugsbunny1.wav';
listOfWords['man'] = 'http://www.wav-sounds.com/cartoon/porkypig1.wav';
listOfWords['pin'] = 'http://www.wav-sounds.com/cartoon/daffyduck1.wav';
listOfWords['gag'] = 'http://www.wav-sounds.com/cartoon/porkypig1.wav';

然后我有脚本获取数组列表项并动态创建网格。

var rndWord = null;
var guesses = new Array();
var shuffledWords = keys(listOfWords).slice(0).sort(function() {
return 0.5 - Math.random();
}).slice(0, 12);

 var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;

for (var i = 0; i < Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
var row = document.createElement('tr');

for (var j = i; j < i + wordsPerRow; ++j) {
    var word = shuffledWords[j];
    guesses[word] = [];

    for (var k = 0; k < word.length; ++k) {
        var cell = document.createElement('td');


        $(cell).addClass('drop').attr('data-word', word);
        cell.textContent = word[k];
        // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
        row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}

document.body.appendChild(tbl);

谢谢。

Answer 1

您可以在 DOM 中添加一个隐藏对象:

<ul style="display:none;" id="wordlist">
  <li data-word="mat" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav"></li>
  <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav"></li>
  <!-- data-xxx can be read with JS, node["data-xxx"] or jQuery: node.data("xxx") -->
</ul>

然后您可以使用 jQuery 或 node.children 遍历所有元素:

var listOfWords = {};

var ul = document.getElementById("wordlist");

var i;
for(i = 0; i < ul.children.length; ++i){
    listOfWords[ul.children[i].getAttribute("data-word")] = ul.children[i].getAttribute("data-audio");
}

console.log(listOfWords);

Demo

提示:请注意，您的 listOfWords 实际上是一个对象而不是数组。数组仅支持整数索引，应使用 .push 填充。

编辑:

请看Tomas' answer .虽然这种方法肯定会让您的同事无需实际编写 JavaScript 即可添加或更改元素，但这太费力了。无论哪种方式，他们都会问你如何向列表中添加元素的问题。另见 Dennis' comment .