javascript - 对多个 Field 和 div 使用动态 jQuery 函数

Question

我有一个 jQuery 代码，它获取文本输入的值并将其值添加到 div 类中。虽然下面的代码工作正常，但我试图找出如何使这个函数对于多个文本输入和多个 div 更加动态地工作，而无需一次又一次地为每个输入和 div 复制相同的脚本。

jQuery(document).ready(function($) {

  function checkForInput(element) {
    var value = $('.my-input-1').val();
    $("#myDiv_1").removeClass().addClass(value);

  }

  $('input.my-input-1').on('change keyup', function() {
    checkForInput(this);
  });

});

jQuery(document).ready(function($) {

  function checkForInput(element) {
    var value = $('.my-input-2').val();
    $("#myDiv_2").removeClass().addClass(value);

  }

  $('input.my-input-2').on('change keyup', function() {
    checkForInput(this);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

Answer 1

您可以为每个input使用一个属性，其值代表div的id

jQuery(document).ready(function($) {
  $('input.class-input').on('change keyup', function() {
    const $this = $(this);
    const value = $this.val();
    const divId = $this.data('for');
    $(`#${divId}`).removeClass().addClass(value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">

<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>