检测html中的变化[重复]

Question

我正在使用 CodeIgniter 开发一个应用程序，我想检测 DOM 中的某些元素何时发生了变化。假设我有以下内容：

<input type="text" name="idPerson0" id="idPerson" value="<?= $idPerson0; ?>"  style="width: 150px;"/>
<input type="text" name="idPerson1" id="idPerson1" value="<?= $idPerson2; ?>"  style="width: 150px;"/>
<input type="text" name="idPerson2" id="idPerson2" value="<?= $idPerson2; ?>"  style="width: 150px;"/>

$idPerson0, $idPerson1, $idPerson2 已设置。然后我想在任何人更改时显示一个工具提示，显示原始值，但如果我决定再次放置原始值，属于适当输入的工具提示应该消失。

目前，我正在使用 JQuery，但使用的是“验证”按钮。

$('#btn-verify').click(function () {
    var old_id0 = "<?= $idPersona0 ?>";
    var old_id1 = "<?= $idPersona1 ?>";
    var old_id2 = "<?= $idPersona2 ?>";


    var new_id0 = $("#idPersona0").val();
    var new_id1 = $("#idPersona1").val();
    var new_id2 = $("#idPersona2").val();

    if (old_id0 != new_id0){
        // show tooltip
    } else {
       // hide tooltip
    }

    // the other ifs
}

我想有一种“实时方式”来显示工具提示和检查差异。

Answer 1

您可以在 jquery 中对 change 事件触发该函数：

$("#idPerson0,#idPerson1,#idPerson2").change(function(){
    var old_id0 = "<?= $idPersona0 ?>";
    var old_id1 = "<?= $idPersona1 ?>";
    var old_id2 = "<?= $idPersona2 ?>";


    var new_id0 = $("#idPersona0").val();
    var new_id1 = $("#idPersona1").val();
    var new_id2 = $("#idPersona2").val();

    if (old_id0 != new_id0){
        // show tooltip
    } else {
       // hide tooltip
    }

    // the other ifs
}