javascript - 在 forEach 中查找特定的 div

Question

我想知道当 forEach 的回调不直接引用所需元素时如何选择子元素。

const $searchField = document.querySelectorAll('.js-search');

if ($searchField.length > 0) {
  $searchField.forEach(function($el) {
    // $el = .js-search
    $el.addEventListener('click', function(event) {
      $el.classList.add('is-active');
    });

    // Here, i need to target the input, not .js-search
    $el.addEventListener('keyup', function(event) {
      if ($el.value.length > 0) {
         $el.classList.add('is-active');
       } else {
         $el.classList.remove('is-active')
       }
    //});
  });
}

这里，$el 指的是父级 .js-search 所以显然 keyup 不能工作。我想确保选择输入，但我不确定如何正确选择。

演示可在 Codepen 上获得!

目标是在搜索完成时保持状态为事件状态(至少有 1 个字符)。

谢谢

Answer 1

只需选择子input的.value，而不是$el的.value :

const $searchField = document.querySelectorAll('.js-search');
$searchField.forEach(function($el) {
  // $el = .js-search
  $el.addEventListener('click', function() {
    $el.classList.add('is-active');
  });

  const input = $el.querySelector('input');
  input.addEventListener('keyup', function() {
    if (input.value.length > 0) {
       $el.classList.add('is-active');
     } else {
       $el.classList.remove('is-active')
     }
  });
});

请注意，如果您不想要，则不需要 if 检查 - 在空集合上调用 forEach 不会抛出错误，它只是不会'迭代任何东西。

您还可以考虑为 NodeList.prototype.forEach 添加一个 polyfill(如果您还没有这样做的话)，因为旧版浏览器不支持它。 (或者，将集合转换为数组，或使用 Array.prototype.forEach.call)

有点基于意见，但不需要在变量名前加上前缀 $ - 这不是 PHP。通常，$ 前缀表示某物是 jQuery ($) 集合。如果您正在执行 DOM 操作，最好不要使用以 $ 开头的变量名，以免将来的代码读者感到困惑。