如何添加/删除隐藏类

Question

我有一个锚标签，我想从中删除/添加一个隐藏的类，但由于某种原因，我的简单 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

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

请注意：要从输入元素重置文本，您必须使用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>