javascript - 如何添加/删除隐藏类

Question

我有一个 anchor 标记，我想从中删除/添加一个隐藏类，但出于某种原因，我的简单 if else 语句不起作用，并且“重置”保持显示。我想要它，以便当输入中有文本时它显示但当它为空时它不显示。我一直无法让它工作。如果需要，我可以提供更多

const search = document.querySelector('.frm-control');
const reset = document.querySelector('.reset')
if (search != "") {
  reset.classList.remove('hidden');
} else {
  reset.classList.add('hidden');
}
console.log(reset)
console.log(search)

reset.addEventListener('click', function (e) {
  // x();
  // e.preventDefault();


  // const row = document.querySelectorAll('.thumb-display');
  // row.classList.add('hidden');
  // search.innerHTML = "";
})

起初我想将条件添加到我的事件监听器中，但那也行不通

HTML:https://codepen.io/ahassan77/pen/QWWBKxo

Answer 1

您可以在元素的input 事件处理函数中设置类。

请注意:要重置输入元素中的文本，您必须使用 value 属性而不是 innerHTML。

尝试以下方式:

const search = document.querySelector('.frm-control');
const reset = document.querySelector('.reset')

search.addEventListener('input', function (e) {
  if (this.value.trim() != "") {
    reset.classList.remove('hidden');
  } else {
    reset.classList.add('hidden');
  }
});

reset.addEventListener('click', function (e) {
  // x();
  // e.preventDefault();
  // const row = document.querySelectorAll('.thumb-display');
  search.value = "";
  reset.classList.add('hidden');
});

.hidden {
  visibility: hidden;
}

<form class="frm-filter">
  <div class="frm-group">
    <a class="reset" href="#">Reset</a>
    <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
  </div>
</form>