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

Question

I have a jQuery code that gets the value of the text input and add its value to a div class. while following code works fine, i am trying to find out how to make this function work more dynamic for more than one text input and more than one divs, without copying the same script for each input and div again and again.

 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

You can use an attribute for each input that its value represents the id of the div

 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

In case if you don't want to have identical classes for input elements.(As per your code.) Hope it helps.

 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>