存储默认值并在单击事件中进行比较

Question

代码不完整，但演示了我要做的事情。在我的脚本中，我有一个jQuery函数，当页面首次加载在数组"defaultValues"时，存储所有文本区的默认值。当"click"函数执行时，我们的想法是在"CheckTextChange"函数中使用数组"defaultValues"，并检查是否有任何项目与"currentVal"不匹配。如果currentVal有另一个值，则文本发生了更改，CheckTextChange将返回true。我想知道，我怎么能访问"defaultValues[]"内CheckTextChange和我怎么能使用defaultValues[]在if语句检查天气任何项目不匹配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;
}

Answer 2

使用关联映射:

var defaultValues = {}; 
$(document).ready(function(){      
    $('.txt').each(function () {
        defaultValues[$(this).attr('id')] = $(this).val();            
    });     
});
    function CheckTextChange() {;
        var isChanged = false;
        $('.txt').each(function () {
            var currentVal = $(this).val();
            //Check if anny item in defaultVaules[] match currentVal
            if (currentVal != defaultValues[$(this).attr('id')]) {
                isChanged = true;
            }
        });
        return isChanged;
    }

并为您的字段设置ID:

<h3>Text1...</h3>
<textarea class="txt" id="field1">Hejsan</textarea><br/><br />
<h3>Text2...</h3>
<textarea class="txt" id="field2">Hejdå</textarea><br/><br />
<h3>Text3...</h3>
<textarea class="txt" id="field3">Hejsan</textarea><br/><br />
<input id="btnClick" type="button" value="Save" />

Answer 3

你必须像下面这样打破循环

function CheckTextChange() {;
   var isChanged = false;
   $('.txt').each(function (index) {
      var currentVal = $(this).val();
      //Check if anny item in defaultVaules[] match currentVal
      if (currentVal != defaultVaules[index]) {
         isChanged = true;
         return;
      }
  });
  return isChanged;
}