2

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

问题是当需要在游戏中添加新单词时，它们必须通过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);

谢谢。

4

3 回答 3

4

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

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

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

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

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

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

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

于 2012-07-25T11:29:55.463 回答
4

您可以在 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);

演示

提示：请注意，您listOfWords实际上是一个对象而不是数组。数组仅支持整数索引并且应该用.push.

编辑：

请看一下Tomas 的回答。虽然这种方法肯定可以让您的同事在不实际编写 JavaScript 的情况下添加或更改元素，但这实在是太费力了。无论哪种方式，他们都会询问您如何将元素添加到列表中。另见丹尼斯的评论。

于 2012-07-25T11:15:43.430 回答
0

简而言之 - 不，你不能只使用 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>

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

于 2012-07-25T11:29:55.917 回答