javascript - 如果输入是焦点且在跨度内，则添加类

Question

我非常想通过跨度内自动生成的输入来解决我的问题。我在我的网站上使用 WordPress 插件 Contact Form 7，我希望在用户使用输入字段时为标签添加动画效果。

当输入字段获得焦点或在其中输入内容时，类 active 应出现在类为“grid-3”的 div 中。

我尝试自己获取 JavaScript，但它不起作用:

$('.wpcf7-form-control-wrap').each(function() {
  //console.log($(this));
  $(this).on('focus', function() {
    $(this).parent().parent().addClass('active');
  });

  $(this).on('blur', function() {
    if ($(this).val().length == 0) {
      $(this).parent().parent().removeClass('active');
    }
  });

  if ($(this).val() != '') $(this).parent('.grid-3').addClass('active');

});

HTML:

<div class="grid-3">
  <label for="schenkel2">Schenkel 2 in mm</label>
  <span class="wpcf7-form-control-wrap schenkel2">
    <input type="text" name="schenkel2" value="" size="40" class="wpcf7-form-control wpcf7-text" id="schenkel2" aria-invalid="false">
  </span>
</div>

Answer 1

你的逻辑看起来不错，尽管我建议爬行 DOM 树，而不是向上爬两个父节点，直到找到你正在寻找的类。这样，它就不太可能因 DOM 的更改而中断。在普通的 javascript 中，像下面这样的东西应该可以完成这项工作。请注意，它使用 classList您可能需要为旧版本的 IE 进行填充。

/**
* Walk up DOM tree to get parent element with the matching class
* @param {Element} Element to search from
* @param {string} The class name to identify target parent
* @return {Element} The parent element with targetClass or null of we reach the top of the DOM tree
**/
function getTargetParent(elem, targetClass) {
    var currElem = elem;
    while(
  	  currElem
  	  && !currElem.classList.contains(targetClass)
    ) {
    	currElem = currElem.parentNode;
    }
    return currElem;
}

/**
* Add a focus event listener to an element to add "focus" class on the parent identified by targetClass
**/
function addFocusListener(elem, targetClass) {
  var targetParent = getTargetParent(elem, targetClass);
  if(targetParent) {
		elem.addEventListener('focus', function() {
	    targetParent.classList.add('focus');
    });
    elem.addEventListener('blur', function() {
    	targetParent.classList.remove('focus');
    });
  }
}

var inputs = document.getElementsByClassName('wpcf7-form-control');
for(var i = 0; i < inputs.length; i++) {
	addFocusListener(inputs[i], 'grid-3');
}

.focus {
  color: red;
}

<div class="grid-3">
  <label for="schenkel2">Schenkel 2 in mm</label>
  <span class="wpcf7-form-control-wrap schenkel2">
    <input type="text" name="schenkel2" value="" size="40" class="wpcf7-form-control wpcf7-text" id="schenkel2" aria-invalid="false">
  </span>
</div>