2

私は現在、対応する単語に文字をドラッグアンドドロップするスペルゲームを作成しています。現時点では、動的にグリッドを生成する単語のリストが配列リストにあります。

問題は、新しい単語をゲームに追加する必要がある場合、オフィスのその側がJavaScript / JQueryに精通しておらず、学習する意思がないため、HTMLを介して追加する必要があることです。

これに対する最善のアプローチは何でしょうか？

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

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。

編集：

トーマスの答えを見てください。このアプローチにより、同僚が実際にJavaScriptを記述せずに要素を追加または変更できるようになりますが、それは単純に手間がかかりすぎます。いずれにせよ、リストに要素を追加する方法について質問されます。デニスのコメントも参照してください。

于 2012-07-25T11:15:43.430 に答える
4

ゼータの答えはおそらくこれを行う方法のアイデアをあなたに与えるでしょうが、それはあなたの実際の問題を実際には解決しないと思います。あなたが自分で言ったように：

問題は、新しい単語をゲームに追加する必要がある場合、オフィスのその側がJavaScript / JQueryに精通しておらず、学習する意思がないため、HTMLを介して追加する必要があることです。

私にとって、これは、HTMLで辞書を指定する方法よりも、チームの根本的な問題を示しています。あなたはあなたに対して積極的に働いている人々と一緒に働いているようです。この状況を解決するためのいくつかの異なる方法があります。それらのいくつかは他の方法よりも挑発的ですが、いくつかは他の方法よりもあなたの側でより多くの作業を必要とします。どれがあなたに当てはまるかを自分で判断する必要があります...

  • 彼らに学ばせる。辞書に単語を追加するためにjQueryマスターである必要はありません。彼らは、教えることができる特定の構文を学ぶ必要があります。
    それらは明らかにHTMLマークアップで辞書を指定することができるので、何らかの形式の構文に慣れていると見なすことができます。辞書の構文はゼータが提案したものよりもはるかに単純だと思います。したがって、彼らが一方を学ぶことができれば、もう一方を教えることができるはずです。
    必要に応じて、会社のはしごを上げて上司に相談してください。彼らはそれを気に入らないでしょうが、あなたの開発プロセスはおそらく気に入るでしょう。

  • 彼らの仕事をしなさい。開発プロセスで誰が何をするかを再編成することにより、プロセス全体を簡素化することを検討してください。辞書を担当するチームが実際のキーと値のペアをコードに追加できない場合、おそらく彼らはあなたにそれを行うように頼むことができますか？1日に数回チェックして対応するものをコードに追加する専用アドレスへの電子メールは、それを解決する1つの方法です。

  • それらに管理システムを書いてください。これには、機能の作成とサポートの両方を行うための多くの作業が含まれますが、他の問題である程度の信用を得る可能性があります。アプリケーションが後で新しい単語を追加できるようにする必要がある場合は、Webフォームから辞書に単語を追加できる簡単なサービスを作成してみませんか。すべてをサーバーに保存し、必要なときにAJAXを使用して辞書をロードします。他のチームは何も学ぶ必要はありません。フォームに情報を入力して[送信]をクリックするだけで、修正されます。

私のポイントは、このように単純な問題で途中で会いたくないチームで作業している場合、これらの単語をリストに入れる方法よりも大きな問題があるということです。ここでは、実際の問題の解決に焦点を当てます。

于 2012-07-25T11:29:55.463 に答える
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 に答える