对多个 Field 和 div 使用动态 jQuery 函数答案

【问题标题】：use a dynamic jQuery function for more than one Field and div对多个 Field 和 div 使用动态 jQuery 函数
【发布时间】：2019-11-11 06:17:33
【问题描述】：

我有一个获取文本输入值并将其值添加到 div 类的 jQuery 代码。虽然以下代码可以正常工作，但我正在尝试找出如何使该函数对多个文本输入和多个 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>

【问题讨论】：

标签： javascript jquery html input

【解决方案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>

【讨论】：

更好的是，您可以使用const divId = $this.data('for');。 +1 #${divId}
@Ammar 是的！非常感谢，这正是我想要的！

【解决方案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>

【讨论】：