Question

我有一个应用程序，用户需要在该应用程序中查看最近编辑期间所做的更改。通过更改我的意思是，所有输入中的更改都像textarea，下拉列表。

我试图通过在右上方显示背景图像来实现此功能，然后当用户单击此背景图像时，会显示一个显示差异的弹出窗口。我正在使用原型1.7.0。

我的第一个问题是： - 1.实现此功能的最佳方法是什么？
2.我可以在背景图像上放置onClick吗？

Answer 1

我相信jQuery库中有一些函数会对你有所帮助。如果你正在使用原型，我猜你可以使用一些类似的功能。

我建议写一些这样的代码：

var $input = $('input').add('textarea').add('select');

$input.each(function() {
 var id = $(this).attr('id');
 var value = $(this).val();
 var hiddenId = 'hidden' + id;
 var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId);
 $(this).after(newHiddenInput);
});

上面的代码将为您的页面上的每个输入，textarea和select创建一个新的隐藏输入。它将与重复的输入具有相同的值。它将具有一个id，相当于在id前加上“hidden”一词。

我不知道您是否可以将点击处理程序附加到背景图像。如果您的输入包含在<div>内，您可以通过将点击处理程序附加到div来获得所需的结果。

在任何情况下，您现在应该拥有旧值，您可以轻松地将它们与用户的输入进行比较，以便您可以准备差异摘要。

Answer 2

Prototype为我们提供了Hash类，它几乎是完美的，但是没有办法计算与另一个哈希的差异，所以让我们添加......

Hash.prototype.difference = function(hash)
{
    var result = this.clone();
    hash.each(function(pair) {
        if (result.get(pair.key) === undefined)
            // exists in hash but not in this
            result.set(pair.key, pair.value);
        else if (result.get(pair.key) == pair.value)
            // no difference so remove from result
            result.unset(pair.key);
        // else exists in this but not in hash
    });
    return result;
};

这是无法判断元素是否被点击它的背景图像 - 你可以找到点击它的坐标，但这并非万无一失，特别是因为CSS3增加了多个背景和过渡等复杂功能。最好有一个绝对定位的元素作为按钮。

$('button-element').observe('click', function() {
    var form_values = $H($('form-id').serialize(true));
    if (old_values) {
        var differences = old_values.difference(form_values);
        if (differences.size()) {
            showDiffPopup(differences);
        }
    }
    window.old_values = form_values;
});
// preset current values in advance
window.old_values = $H($('form-id').serialize(true));

剩下的就是实施showDiffPopup来显示计算出来的differences。

跟踪Web应用程序中的更改

2 个答案: