Question

我有一个锚标记，我想从中删除/添加一个隐藏的类，但是由于某种原因，我的if if语句不起作用，并且“ Reset”保持显示。我想要这样，以便在输入中显示文本时显示它，但在为空时不显示它。我一直无法使它正常工作。如果需要，我可以提供更多

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>

如何添加/删除隐藏的课程

1 个答案: