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 代码的原始文本。

但是用户也可以选择编辑文本。在这种情况下，我将原始文本加载到 textarea 中，但这次我需要知道用户是否删除了哪些单词以及用户是否在 textarea 的任何位置添加了一些单词。简而言之，我需要跟踪已更改的 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 回答