如何使用jQuery/JavaScript修改自定义data-ischanged属性的取值

问题原因 #

你遇到的设置不生效的问题主要来自以下三个常见错误：

1. 属性值类型不匹配：HTML的自定义data-*属性本质是字符串类型，你直接传入布尔值true/false存储时会被自动转为"true"/"false"字符串，如果你后续判断时用===false做全等判断，会因为类型不一致得到错误结果。
2. 操作方式不统一：你修改属性时混用了jQuery的attr()方法和原生setAttribute()方法，如果你后续读取属性时用到了jQuery的data()方法，会出现缓存不同步的问题：jQuery的data()方法第一次读取data-*属性后会将值存在自身缓存中，后续修改DOM上的属性不会同步更新jQuery缓存，读取到的始终是旧值。
3. 部分重置代码被注释：你代码中描述文本框的重置代码被注释掉了，这部分控件的属性自然不会被更新。

解决方案 #

推荐你统一属性操作方式，避免混用不同的操作API，以下两种方案二选一即可：

方案1：全程操作DOM属性（适合需要直观看到DOM属性变化的场景） #

所有修改、读取都用jQuery的attr()方法，直接操作DOM上的真实属性：

• 简化change事件绑定，无需逐个绑定：

$('input[data-ischanged]').on('change', function () {
    $(this).attr("data-ischanged", "true");
});

• AJAX成功后统一重置属性：

success: function (RefResponse) {
    toastr.success("Data saved successfully");
    getOtherDetails(Id);
    // 批量重置所有控件的属性
    $('#SelectedLookupTypeDescription, #SelectedStartDate, #SelectedEndDate').attr('data-ischanged', 'false');
}

• 判断属性值时用字符串做匹配：

if ($('#SelectedLookupTypeDescription').attr('data-ischanged') === 'true') {
    // 执行修改后的对应逻辑
}

方案2：全程用jQuery缓存操作（性能更好） #

所有修改、读取都用jQuery的data()方法，操作jQuery内部缓存，性能更高：

• change事件绑定：

$('input[data-ischanged]').on('change', function () {
    $(this).data("ischanged", true);
});

• AJAX成功后统一重置属性：

success: function (RefResponse) {
    toastr.success("Data saved successfully");
    getOtherDetails(Id);
    $('#SelectedLookupTypeDescription, #SelectedStartDate, #SelectedEndDate').data('ischanged', false);
}

• 判断属性值时直接用布尔值判断即可：

if ($('#SelectedLookupTypeDescription').data('ischanged')) {
    // 执行修改后的对应逻辑
}

内容的提问来源于stack exchange，提问作者ispostback