0

ユーザーがテキストを追加するテキストエリアがあります。テキストエリアを送信すると、入力したテキストがユーザーに表示されますが、リスト内の各単語が表示されています。

<div id=0> "word0" </div>
<div id=1> "word1" </div>

このページには、各単語も配列に格納されます。

WordArr[0] = word0;
WordArr[1] = word1;
...

これで、ユーザーは各単語をクリックできるようになり、クリックされた単語の WordArr は次のようになります。 WordArr[0][0] = "clicked";

これで大丈夫です。ユーザーは、php を使用してテキストを mysql データベースに保存できるようになりました。データベースには、div コードのない元のテキストも保存されます。

しかし、ユーザーはテキストを編集することもできます。この場合、元のテキストをテキストエリアに読み込みますが、今回は、ユーザーが削除した単語とその単語をテキストエリアのどこかに追加したかどうかを知る必要があります。つまり、変更された div を追跡する必要があります。または、元のテキストエリアに何かが追加されている場合。したがって、ユーザーは単語を再度選択する必要はありません。

元のテキストが次のようになっているとしましょう。

こんにちは、jQuery の友人です。今日は幸せだ。

次に、おそらくユーザーがこのテキストエリアに何かを削除または追加します。

こんにちは、私の友人です。今日はとても幸せです。

次に、入力された元の文字列への変更を取得し、クリックされた div を保持するにはどうすればよいですか?

4

1 に答える 1

0

選択した単語を追跡するキーの単語を持つオブジェクトを維持することをお勧めします。次に、スペースの入力または編集の完了時に、どの単語が存在するかを確認します。単語の呼び出しをクリックするとhandleWordClick(word)、最後に呼び出しgetFinal()て、このようなオブジェクトの配列を取得します{word: "apple", clicked: true}。

var words = [],
    clicks = {};

var checkWords = function() {    
     words = $(this).val().split(" ");
     $("#out").val(words.join(","));
};
//call this from whatever event a word click triggers
var handleWordClick = function(word) {
    clicks[word] = true;    
};
//to get all of your data, run this
var getFinal = function() {
    return words.map(function(word) {
        return {
            word: word,
            clicked: clicks[word]
        };
    });
}

$("#in").keydown(function(event) {
    //once they enter space, check what the words are
    if( event.keyCode == 32 ) {
        checkWords.call(this);
    }        
})
//when they're done editing, check what the words are
$("#in").blur(checkWords)
​
于 2012-06-23T21:31:11.143 に答える