JavaScript:检查/比较所有字段的值

Question

在我的 JavaScript 函数中，我为所有输入、文本区域和选择字段提供实际值作为 initial_value:

$('input, textarea, select').each(function (i) {
    $(this).data('initial_value', $(this).val());
});

因此我可以通过 keyup 检查字段中是否有任何更改:

$("body").on("keyup", 'input, textarea, select', function() {
    if ($(this).val() != $(this).data('initial_value')) {
        handleFormChanged();
        changeMessage();
    }
});

但我也想通过 keyup 检查更改是否已从字段中删除。我的想法是使用 else if 检查所有字段中的值是否等于所有字段中的 initial_value 。了解所有字段中的值是否确实等于 initial_value 非常重要。但这不起作用。还有更好的想法吗？非常感谢!

Answer 1

因此，根据您的评论，我假设您希望将每个输入的值与其自己的初始值进行比较，并查看它们是否全部匹配。如果没有，您想调用您的方法。

因此，您需要迭代 keyup 处理程序中的所有输入，可能会生成一个带有自定义值的 array (yes => value和初始值匹配，no => 值和初始值不匹配)基于使用 $.map() 满足的条件。稍后，您可以使用$.inArray()查看是否存在不匹配值(本例中为“no”)并采取相应措施。下面是如何实现这一点的演示。

var allInputs = 'input, textarea, select';

$(allInputs).each(function (i) {
    $(this).data('initial_value', $(this).val());
});

$("body").on("keyup", allInputs, function() {
    
    var matches = $(allInputs).map(function() {
        var $this = $(this);
        return $this.val() === $this.data('initial_value') && "yes" || "no";
    }).get();
    
    //The below is only for the purpose of demo
    $("div").html( JSON.stringify(matches, null, 4) );
    //alert ("Each input is equal to it's inital_value: " + ($.inArray("no", matches) === -1));
    // - End of demo --
    
    //So, do your stuff when the condition is met
    if ($.inArray("no", matches) > -1) {
        handleFormChanged();
        changeMessage();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input ttype="text" />
<input ttype="text" value="10" />
<textarea></textarea>

<div></div>