我可以定义一个函数来处理在 2 个输入标签上定义的“更改键控”事件吗?这是个好主意吗

Can I define a single function that handle the "change keyup" event defined on 2 input tags? is it a good idea?

本文关键字：定义 更改键控 事件 好主意 一个 函数 处理 标签 我可以 输入      更新时间：2023-09-26

在HTML代码中，我有以下2个输入字段：

<div class="col-md-7">
    <input id="variazioneUlterioreSaldoInput" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 60%">
</div>
<div class="col-md-12">
    <label for="anticipo">Anticipo:</label>
    <input id="anticipoModaleUlterioreSaldo" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 25%">
</div>

这些字段是可编辑的，当用户更改其中一个值时，我必须执行这两个值的总和。我有一个如下所示的jQuery函数，当用户更改第一个输入中的值时执行：

$("#variazioneUlterioreSaldoInput").bind('change keyup', function() {
    console.log("VALUE CHANGED !!!");
    // DO SOMETHING
}

我的疑问是实现我之前的要求是更好地实现 2 个不同的 jQuery 函数，每个函数都在特定输入的 change keyup 事件上定义，或者我可以在我的两个输入标签上为 change keyup 事件定义一个唯一的函数吗？

您可以通过用逗号分隔它们的选择器来为这两个元素分配相同的事件处理程序：

$('#variazioneUlterioreSaldoInput, #anticipoModaleUlterioreSaldo').on('change keyup', function() {
    console.log("VALUE CHANGED !!!");
    // calculate the sum of values here...
});

使用此模式是一种很好的做法，因为它符合 DRY 原则。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#variazioneUlterioreSaldoInput, #anticipoModaleUlterioreSaldo").bind('change keyup', function () {
            console.log("VALUE CHANGED !!!");
            // DO SOMETHING
        });
    });
</script>
</head>
<body>
    <div class="col-md-7">
    <input id="variazioneUlterioreSaldoInput" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 60%">
</div>
<div class="col-md-12">
    <label for="anticipo">Anticipo:</label>
    <input id="anticipoModaleUlterioreSaldo" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 25%">
</div>
</body>
</html>
相关文章：