使用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。