Javascript 将两个函数合并为一个函数

我想结合这两个功能

有人能告诉我怎么做吗？我试过了，但找不到好的解决办法。 这些功能完成相同的任务。所以我想把这些结合起来

详情：-

这是我的密码：-

var bg = $("#metadescription").on('keyup', function(){
var maxlength = $(this).attr("data-limit");
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
$(".spanbg1").css("width", percentage);
var $span1 = $(".spanbg1");
var lengthScope = 10;

if ($(this).val().length > maxlength)
{

 $span1.css("background-color", "#fc3636");

}
 else if ($(this).val().length > maxlength-lengthScope)
{                         
 $span1.css("background-color", "#ffb14d");
 }
 else
 {                                
 $span1.css("background-color", "#76e07a");
 }

 });


 var bg = $("#title").on('keyup', function(){
 var maxlength = $(this).attr("data-limit");
 var lengthScope = 10;
 var $span = $(".spanbg");
 var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
 $span.css("width", percentage);

 if ($(this).val().length > maxlength)
 {

  $span.css("background-color", "#fc3636");

  }
  else if ($(this).val().length > maxlength-lengthScope)
  {                               
$span.css("background-color", "#ffb14d");
  }
  else
   {                               
   $span.css("background-color", "#76e07a");
   }

   });

用@iHasCodeForU三元表达式更新答案， 在函数直接放置和其他代码中常见的代码，如果条件类似于此

if($(this).attr("id") == "title") {
 // code related to title id
}
else {
}



var bg = $("#metadescription,#title").on('keyup', function(){
  var maxlength = $(this).attr("data-limit");
  var lengthScope = 10;
  var $span = $(".spanbg");
  var $span1 = $(".spanbg1");
  var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';

  if($(this).attr("id") == "title") {
    $span.css("width", percentage);

    if ($(this).val().length > maxlength) {
     $span.css("background-color", "#fc3636");
   }
   else if ($(this).val().length > maxlength-lengthScope) {                               
     $span.css("background-color", "#ffb14d");
   }
  else {                               
    $span.css("background-color", "#76e07a");
  }
}
else {
 if ($(this).val().length > maxlength) {
   $span1.css("background-color", "#fc3636");
 }
 else if ($(this).val().length > maxlength-lengthScope) {                         
   $span1.css("background-color", "#ffb14d");
 }
 else {                                
  $span1.css("background-color", "#76e07a");
}
}
});

请试试这个

var bg = $("#metadescription, #title").on('keyup', function() {
var maxlength = $(this).attr("data-limit");
var lengthScope = 10;
var targetSpan = $(this).attr("data-target-span");
var $span = $("."+targetSpan);
var percentage = Math.floor($(this).val().length / maxlength * 100) + '%';
$span.css("width", percentage);

if ($(this).val().length > maxlength) {
    $span.css("background-color", "#fc3636");
} else if ($(this).val().length > maxlength - lengthScope) {
    $span.css("background-color", "#ffb14d");
} else {
    $span.css("background-color", "#76e07a");
}

}))

HTML代码：

<input type="text" id="metadescription" data-target-span="spanbg1" >
<span class="spanbg1"></span>
<input type="text" id="title" data-target-span="spanbg" >
<span class="spanbg"></span>

但是，当我在两个后台更改中键入某些内容时，由于var$span在两个函数中都不同，这并不能解决问题。在我的原始代码中，有一个类是“.spanbg1”，另一个类是“.spanbg”

var$span=（$（this）.attr（'id'）=”metadescription“？$（.spanbg1”）：$（.spanbg”））

mayhelp@Lain我喜欢我的高度逻辑性：）

<input type="text" id="metadescription" data-target-span="spanbg1" >
<span class="spanbg1"></span>
<input type="text" id="title" data-target-span="spanbg" >
<span class="spanbg"></span>