我可以使数组列表适应 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。

Answer 2

虽然Zeta's answer 可能会让您了解如何执行此操作，但我想说它并不能真正解决您的实际问题。正如你自己所说：

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

对我来说，这指出了您团队中更根本的困难，而不仅仅是如何在 HTML 中指定字典；您似乎正在与积极反对您的人合作。我看到了几种不同的方法来解决这种情况——其中一些比其他的更具挑衅性，而另一些则需要你做更多的工作。您必须自己判断其中哪些（如果有）适用于您...

• 强迫他们学习。他们不必成为 jQuery 大师才能将单词添加到字典中 - 他们只需学习您可以教他们的特定语法。 他们显然能够在 HTML 中指定字典 标记，因此可以假定对某种形式的语法感到满意。 我会说你的字典语法比 Zeta 的语法简单得多 建议，所以如果他们能学一门，你应该能教他们 另一个。
  如果需要，请登上公司阶梯并与他们的经理交谈。他们不会喜欢它，但您的开发过程可能会喜欢。

• 做他们的工作。考虑通过重新组织开发过程中谁做什么来简化整个过程。如果负责字典的团队无法将实际的键/值对添加到代码中，也许他们可以要求您为他们做这件事？向专用地址发送电子邮件，您每天检查几次并将相应的内容添加到代码中，这将是解决问题的一种方法。

• 为他们编写一个管理系统。这包括您的大量工作，包括创建和支持该功能 - 但它可能会在其他方面为您赢得一些善意。如果应用程序应该支持以后添加新单词，为什么不编写一个简单的服务，让他们从 Web 表单将单词添加到字典中呢？您将所有内容存储在服务器上，并在需要时使用 AJAX 加载字典。其他团队不需要学习任何东西——他们只需在表格中输入信息，然后点击“发送”，就可以搞定。

我的观点是，如果您正在与一个不想在这样一个简单的问题上半途而废的团队合作，那么您面临的问题不仅仅是如何获得这些词进入列表。我会在这里专注于解决真正的问题。

Answer 3

简而言之——不，你不能只使用 HTML 来做到这一点

你需要编写一个简单的脚本来生成包含数组的 js 文件，你可以将这个文件包含到你的 HTML 文件中。

基本上脚本可能如下所示：

<?php
    if (isset($_POST['code']) && isset($_POST['path'])){
        $string = "listOfWords['" . $_POST['code'] . "'] = '" . $_POST['path'] . "';"
        $fh = fopen('listofwords.js', 'a');
        fwrite($fh, $string);
        fclose($fh);
    }
?> 
<form action="" method="post">
    <input type="text" name="code" />
    <input type="text" name="path" />
    <input type="submit" value="Add code" />
</form>

当然这个脚本只是用来添加的，如果你需要编辑/删除记录你应该根据你的需要重写脚本