Объединение нескольких функций .change в одну, используя Jquery

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="">

Мой главный вопрос - как мне go объединить эти функции в одну функцию? Возможно ли это?

Answer 1

Соответствующие элементы являются дочерними элементами #manualFullAddress. Для этого мы можем вместо этого добавить обработчик событий .change() к этому родительскому элементу («делегирование событий», но он также будет работать с одним обработчиком событий на <input /> элемент)

Мы можем использовать this, чтобы получить идентификатор элемента <input />. А с помощью .replace("Manual", "") мы можем получить идентификатор соответствующего элемента <input type="hidden" />.

$("#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, и получить идентификатор динамически, как показано ниже.

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

Но я рекомендую изменить id на data- и использовать его вместо id , если вы его больше нигде не используете.