缩小的javascript代码，我不明白，有人能解释一下吗

我正在努力通过编写代码来提高自己。我可以理解它的正常状态，没有任何问题。在下面的示例代码中，嵌套了jquery、值读取、值赋值和if-else查询。我无法以有意义的可读方式获取代码。任何人都可以用简单的扩展可读格式编写下面的代码吗

$('.input-required input, .input-required select, .input-required textarea').on('focusin keyup', function () {
  var inputSpan = $(this).parent().find('span').text();
  $(this).val() != inputSpan && '' != $(this).val() && $(this).parent().find('span').addClass('input-style-1-active').removeClass('input-style-1-inactive'),
  '' === $(this).val() && $(this).parent().find('span').removeClass('input-style-1-inactive input-style-1-active')
});

$('.input-required input, .input-required select, .input-required textarea').on('focusout', function () {
  $(this).parent().find('span').text();
  '' === $(this).val() && $(this).parent().find('span').removeClass('input-style-1-inactive input-style-1-active'),
  $(this).parent().find('span').addClass('input-style-1-inactive')
});

第一个代码块的扩展版本是否正确，如下所示

$('.input-required input, .input-required select, .input-required textarea').on('focusin keyup', function () {
  var inputSpan = $(this).parent().find('span').text();
  if(($(this).val() != inputSpan) && ('' != $(this).val())){
    $(this).parent().find('span').addClass('input-style-1-active').removeClass('input-style-1-inactive');
  }else{
    $(this).parent().find('span').removeClass('input-style-1-inactive input-style-1-active');
  }
});

---

不管是谁写的，都没有考虑到维护。它是由某种工具生成的代码吗

我想它可以浓缩成

$'：input.input required'。在“input focusout”上，函数e{ 让$inputSpan=$this.parent.find'span'， text=$inputSpan.text， val=$this.val； 如果val&&val！=文本{ $inputSpan .addClass'input-style-1-active' .removeClass'input-style-1-inactive' } 否则{ $inputSpan .removeClass'input-style-1-active' .addClass'input-style-1-inactive' } };

---

如果使用toggleClass

编写它的人没有考虑到维护，那么它的可读性可能会更高。它是由某个工具生成的代码吗？同意mplugjan的观点-这是一个很难学习的代码。但如果必须这样做，通常会将链式函数调用放在它们自己的行上，以使其更具可读性。比如：$this.parent.find'span.addClass…removeClass。。。就在每次见面前都会有换行符。。这将使这段糟糕的代码更容易理解。@mplungjan，是的，由一个工具自动生成，可能像