如何添加类专注于结帐和产品评论表单的输入？

Question

如果输入处于焦点或具有值，我想将 class 添加到所有输入父 .field div。例如在产品页面评论表或结帐页面发货表上。如果输入在焦点上，我会添加一个 "active" class，如果输入有一个值，我会添加 class "hasavalue."

当我尝试使用 jquery 时，产品页面评论表单输入或结帐页面输入没有任何反应。

这是我正在使用的jquery：

requirejs(['jquery'],function($){

   $(document).ready(function(){


    $('.field input').focus(function () {
        $(this).parent().parent().addClass('active');
    }).blur(function () {
        $(this).parent().parent().removeClass('active');
    });



    $('.field input').blur(function(){

        if ( $(this).val() ) {
              $(this).parent().parent().addClass('hasavalue');
        } else{
            $(this).parent().parent().removeClass('hasavalue');
        }

     });

  });
});

我需要使用敲除吗？如果是这样，我怎样才能将这个简单的 jquery 翻译成适用于 Magento 中的所有输入？

Answer 1

如果尚未加载字段，则需要委托事件处理程序。但是'focus'和'blur'不冒泡，所以需要用jQuery的.on('focusin')和.on('focusout')

$(document).ready(function() {

  $('body').on('focusin', '.field input', function() {

    $(this).closest('.field').addClass('active');

  }).on('focusout', '.field input', function() {

    let fieldDiv = $(this).closest('.field');
    fieldDiv.removeClass('active');
    // toggleClass eliminates need for if else, just put the test as second parameter, true adds class while false removes it
    fieldDiv.toggleClass('hasavalue', ($(this).val() !== ''));

  })


  // adding a field afterwards just for demonstration to show it still works
  $('<div class="field"><label>loaded after document ready</label><br><input></div>').appendTo('body')

});

/* just example for visual verification */

.field {
  padding: 1em;
  border: 1px solid white;
  background: orange;
}

.field.active {
  border: 1px solid black;
}

.field.hasavalue {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- structure does not matter as long as there is an input inside .field -->
<div class="field">
  <input>
</div>
<div class="field">
  <div>
    <input>
  </div>
</div>
<div class="field">
  <div>
    <div>
      <div>
        <input>
      </div>
    </div>
  </div>
</div>

如何添加类专注于结帐和产品评论表单的输入？

How to add classes input focused on checkout and product review forms?

jquery

knockout.js

magento2

如何添加 类 专注于结帐和产品评论表单的输入？

How to add classes input focused on checkout and product review forms?

jquery

knockout.js

magento2

如何添加类专注于结帐和产品评论表单的输入？