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>

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

我可以在HTML中使数组列表适应吗？

3 个答案:

编辑：