使用动态jQuery函数进行多个字段和DIV

Question

我有一个jQuery代码，该代码获取文本输入的值并将其值添加到DIV类中。虽然遵循代码正常，但我正在尝试找出如何使此函数在一个以上的文本输入和多个DIV中更具动态性，而无需复制每个输入的相同脚本，并一次又一次地dif。

>

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>

Answer 2

如果您不想为输入元素提供相同的类。(按照您的代码。(希望它会有所帮助。

jQuery(document).ready(function($){
        function checkForInput(elementClass,elementValue) {
          var inputNumber= elementClass.substr(elementClass.length-1);
          
         var divclass='#myDiv_'+inputNumber;
          
        $(divclass).removeClass().addClass(elementValue);
          
        }
      
        $('input.my-input-1').on('change keyup', function() {
          checkForInput($(this).attr('class'),$(this).val());  
         
        });
      $('input.my-input-2').on('change keyup', function() {
          checkForInput($(this).attr('class'),$(this).val());  
          
        });
   
});

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