将两个功能组合为一个功能

Question

我想结合这两个功能。

有人可以告诉我如何吗？ 我已经尝试过了，但是找不到很好的解决方案。 这些功能执行相同的任务。 所以我想把这些结合起来。

细节：-

这是我的代码：

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");
   }

   });

Answer 1

var bg = $("#metadescription, #title").on('keyup', function(){

  //your common code here

  var $span = ($(this).attr('id')=="metadescription" ? $(".spanbg1") : $(".spanbg"));

 //your common code here

 });

使用@iHasCodeForU 三元表达式更新了答案

Answer 2

试试这个， 如果这样的话，直接放在函数中的通用代码以及其他代码都放在里面

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");
}
}
});

Answer 3

请尝试这个。

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>