javascript - 存储默认值并在点击事件中进行比较

Question

代码不完整，但演示了我正在尝试做的事情。在我的脚本中，我有一个 jQuery 函数，当页面首次加载到数组“defaultValues”中时，该函数存储所有文本区域的默认值。当执行“click”函数时，想法是在“CheckTextChange”函数中使用数组“defaultValues”，并检查是否有任何项目与“currentVal”不匹配。如果 currentVal 有另一个值，则已进行文本更改并 CheckTextChange将返回 true。我想知道如何在 CheckTextChange 中访问“defaultValues[]”以及如何在 if 语句中使用 defaultValues[] 来检查天气是否有项目与 currentVal 不匹配？

HTML:

<h3>Text1...</h3>
<textarea class="txt">Hejsan</textarea><br/><br />

<h3>Text2...</h3>
<textarea class="txt">Hejdå</textarea><br/><br />

<h3>Text3...</h3>
<textarea class="txt">Hejsan</textarea><br/><br />

<input id="btnClick" type="button" value="Save" />

脚本:

$('#btnClick').on("click", function () {
    if (CheckTextChange()) {
        alert('TRUE');
    } else {
        alert('FALSE');
    }
})

var defaultValues = []; 
    $(document).ready(function(){      
        $('.txt').each(function () {
            var defValue = $(this).get(0).defaultValue;
            defaultValues.push(defValue);
              var v = defaultValues[0];              
        });     
    });


function CheckTextChange() {;
    var isChanged = false;
    $('.txt').each(function () {
        var currentVal = $(this).val();

        //Check if anny item in defaultVaules[] match currentVal
        if (currentVal != previousVal) {
            isChanged = true;
        }
    });

    return isChanged;
}

Answer 1

您可以将默认值保存为数据属性...

$(document).ready(function() {
    $(".txt").each(function() {
        $(this).attr("data-deftxt", $(this).val());
    });
});

$('#btnClick').on("click", function() {
    if (CheckTextChange()) {
        alert('TRUE');
    } else {
        alert('FALSE');
    }
})

function CheckTextChange() {;
    var isChanged = false;
    $('.txt').each(function() {
        var currentVal = $(this).val();
        if ($(this).val() !== $(this).data("deftxt")) {
            isChanged = true;
        }
    });

    return isChanged;
}