使用Jquery将多个.change函数组合为一个函数

Question

我有几个文本输入字段，可以更新一些隐藏字段。

我有几个.change函数，它们将监视可见输入字段的更改。

这是我的JSFiddle - https://jsfiddle.net/tcgmr698/

Jquery

    $("#TravellerContact_ManualAddress1").change(function () {
        $('input[id=TravellerContact_Address1]').val($('input[id=TravellerContact_ManualAddress1]').val())
    });

    $("#TravellerContact_ManualAddress2").change(function () {
        $('input[id=TravellerContact_Address2]').val($('input[id=TravellerContact_ManualAddress2]').val())
    });

    $("#TravellerContact_ManualAddress3").change(function () {
        $('input[id=TravellerContact_Address3]').val($('input[id=TravellerContact_ManualAddress3]').val())
    });

    $("#TravellerContact_ManualAddress4").change(function () {
        $('input[id=TravellerContact_Address4]').val($('input[id=TravellerContact_ManualAddress4]').val())
    });

    $("#TravellerContact_ManualAddress5").change(function () {
        $('input[id=TravellerContact_Address5]').val($('input[id=TravellerContact_ManualAddress5]').val())
    });

    $("#TravellerContact_ManualPostCode").change(function () {
        $('input[id=TravellerContact_PostCode]').val($('input[id=TravellerContact_ManualPostCode]').val())
    });

HTML

<div id="manualFullAddress" class="fullAddress">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">

            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
            <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
        </div>

发布到数据库的隐藏字段

<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" type="hidden" value="">

<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" type="hidden" value="">

我的主要问题是如何将这些函数组合成一个函数？有可能吗？

Answer 1

相关元素都是#manualFullAddress的子元素。因此，我们可以向这个父元素添加.change()事件处理程序(“事件委派”，但它也适用于每个<input />元素一个事件处理程序)

我们可以使用this来获取<input />元素的id。使用.replace("Manual", "")，我们可以获得相应<input type="hidden" />元素的id。

$("#manualFullAddress").on("change", "input", function() {
  const input = $(this);

  $("#" + this.id.replace("Manual", "")).val(input.val());
});

​

$("#manualFullAddress").on("change", "input", function() {
  const input = $(this);

  $("#" + this.id.replace("Manual", "")).val(input.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="manualFullAddress" class="fullAddress">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress1" name="TravellerContact_ManualAddress1" placeholder="Address" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress2" name="TravellerContact_ManualAddress2" placeholder="Address 2" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress3" name="TravellerContact_ManualAddress3" placeholder="Address 3" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress4" name="TravellerContact_ManualAddress4" placeholder="City" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualAddress5" name="TravellerContact_ManualAddress5" placeholder="Province" type="text">
  <input class="form-control manualAddressEntry-js" id="TravellerContact_ManualPostCode" name="TravellerContact_ManualPostCode" placeholder="Postal Code" type="text">
</div>

<div>
"Hidden" Elements
<br />
<input class="HideValFromSet" id="TravellerContact_Address1" name="TravellerContact.Address1" value="">
<input class="HideValFromSet" id="TravellerContact_Address2" name="TravellerContact.Address2" value="">
<input class="HideValFromSet" id="TravellerContact_Address3" name="TravellerContact.Address3" value="">
<input class="HideValFromSet" id="TravellerContact_Address4" name="TravellerContact.Address4" value="">
<input class="HideValFromSet" id="TravellerContact_Address5" name="TravellerContact.Address5" value="">
<input class="HideValFromSet" id="TravellerContact_PostCode" name="TravellerContact.PostCode" value="">
</div>

​

Answer 2

在您的示例中，您可以使用.manualAddressEntry-js绑定更改事件，并动态获取id，如下所示。

$('.manualAddressEntry-js').change( function() {
  var id = $(this).attr('id').replace("Manual", "");
  $(`input[id=${id}]`).val($(`input[id=${id}]`).val());
});

但我建议您将id更改为data-，如果您不在其他地方使用id，请使用它来代替id。