Javascript HTML最简单的隐藏/显示和类过滤器

我已经到处找过了，但找不到我需要的东西。 我有这样一份清单：

<ul>
    <li class="a b c">Apple</li>
    <li class="a">Banana</li>
    <li class="b">Carrot</li>
    <li class="b c">Drink</li>
</ul>

我还没有弄清楚如何从文本框中提取字符串

我将如何尽可能简单地做到这一点。“最简单的”是代码最少，普通javascript没有多余的特性。我不需要动画或花哨的图形，只是根据标准进行显示和隐藏。我还将注意到，我对JS相当陌生，根本无法理解JQuery

提前谢谢

奥利

---

另外：如果我错过了另一个要求相同信息的问题，请务必告诉我。

希望这有帮助。我如何隐藏和显示可能影响多个不同区域的DOM元素，如下所示： 1） 我创建了一个CSS，如下所示：

.hideDom {
    display: none;
}

2） 然后在代码区域内，我切换css的“开”和“关”以隐藏和显示DOM元素，如下所示：

$('someSelector').removeClass("hideDom"); 

躲藏

$('someSelector').addClass("hideDom"); 

展示。例如，如果我想在出现“condition1”时隐藏几个DOM元素，则显示元素。我将在所有这些元素上设置一个类，如“cssCondition1”，并执行以下操作：

switch(condition){
   case "condition1":
      $('.cssCondition').addClass("hideDom");
      break;
   default:
      $('.cssCondition').removeClass("hideDom");
      break;
}

在您的特定示例中，如果您想隐藏除香蕉以外的所有内容：

$('.b').addClass("hideDom");

---

我已经为您的三个类创建了切换按钮，以及一个根据列表项的内容设置可见性的输入

Javascript

var hiddenClass = [];
var buttons = document.getElementsByClassName('toggleBtn');
for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener('click', function(){
    var self = this;
    var elements = document.getElementsByClassName(self.value);
    toggleButtonState(self);
    for(var i = 0; i < elements.length; i++) {
      var element = elements[i];

      var isHidden = false;
      var classes = element.className.split(' ');
      for(var j = 0; j < classes.length; j++){
        if(hiddenClass.indexOf(classes[j]) !== -1) isHidden = true;
      }

      var vis = elements[i].style.visibility;
      if(vis === 'hidden' && !isHidden){
        setVisibility(element, 'visible');
      } else {
        setVisibility(element, 'hidden');
      }
    }
  });  
}

var input = document.getElementById('classFilter');

input.addEventListener('input', function(){
  var food = document.getElementsByClassName('food');
  for(var i = 0; i < food.length; i++){
    var ele = food[i];
    if(ele.innerHTML.toLowerCase().indexOf(input.value.toLowerCase()) === -1) {
      setVisibility(ele, 'hidden');
    }else {
      isHidden = false;
      var classes = ele.className.split(' ');
      for(var j = 0; j < classes.length; j++){
        if(hiddenClass.indexOf(classes[j]) !== -1) isHidden = true;
      }

      if(!isHidden) setVisibility(ele, 'visible');
    }
  }
});

function setVisibility(element, visibility){
  element.style.visibility = visibility;
}

function setVisibilityByClass(name, visibility) {
  var elements = document.getElementsByClassName(name);
  for(var i = 0; i < elements.length; i++){
    setVisibility(elements[i], visibility);
  }
}

function toggleButtonState(element){
  var on = element.className.indexOf('on') !== -1;
  if(on){
    element.className = 'toggleBtn off';
    if(hiddenClass.indexOf(element.value) === -1) hiddenClass.push(element.value);
  }
  if(!on){
    element.className = 'toggleBtn on';
    hiddenClass = hiddenClass.filter(function(x) { return x !== element.value });
  }  
}

---

在工作中遇到了麻烦，不得不稍微改变监听器以适应他们的环境：

下面是一个示例，说明如何以HTML5的方式干净地完成这项工作，只使用本机JavaScript。这不使用类名，而是使用实际小写数据的键。它还将展示jQuery如何使用$作为函数名的基本示例，以及它如何从本机JSPOV工作。这是我的演示

HTML:

A
B
C
D
全部展示

苹果
香蕉
胡萝卜
喝

JavaScript:

/* This is a basic example of how jQuery works, 
 * but with native JavaScript & without jQuery:
 */
function $(str) {
  if (str.indexOf(' ') > -1) {
    var results = document.querySelectorAll(str);
  } else if (str[0] === '#') {
    var results = document.getElementById(str.replace('#',''));
  } else if (str[0] === '.') {
    var results = document.getElementsByClassName(str.replace('.',''));
  } else {
    var results = document.getElementsByTagName(str);
  }
  return results;
}

// So you can use dollar sign function names, as shortcuts, as shown below:
function showAll(liTags) { // This is useful for the next button click.
  if (!liTags) {
     liTags = $('li');
  }
  for (var i=0; i<liTags.length; i++) {
    var liTag = liTags[i];
    liTag.style.visibility = 'visible';
  }
}

function clickHandler() {
  var key = this.dataset.key; // Gets the data-key attribute.
  var liTags = $('li');
  showAll(liTags);

  if (key !== 'all') {
    // Hide all but current one.
    for (var i=0; i<liTags.length; i++) {
      var liTag = liTags[i];
      var text = liTag.innerText.toLowerCase();
      if (text.indexOf(key) > -1) {
        liTag.style.visibility = 'visible';
      } else {
        liTag.style.visibility = 'hidden';
      }
    }
  }
}

(function init() {
   var results = $('button');
   for (var i=0; i<results.length; i++) {
       results[i].addEventListener("click", clickHandler);
   }
})(); // Self-loading function, which runs only 1x on Page Load.

/*这是jQuery工作原理的一个基本示例，
*但是使用本机JavaScript&不使用jQuery：
*/
函数$（str）{
如果（str.indexOf（“”）>-1）{
var结果=document.queryselectoral（str）；
}else if（str[0]=='#'）{
var results=document.getElementById（str.replace（'#'，''）；
}else if（str[0]='.'））{
var results=document.getElementsByClassName（str.replace（'.'，''）；
}否则{
var results=document.getElementsByTagName（str）；
}
返回结果；
}
//因此，您可以使用美元符号函数名作为快捷方式，如下所示：
函数showAll（liTags）{//这对于单击下一个按钮很有用。
如果（！liTags）{
利塔格=$（'li'）；
}
对于（var i=0；StackOverflow中的iOfftopic），我问了一个问题：“我如何才能尽可能简单地做到这一点？”。这是关于编码的话题。老实说，我不知道“离题”在哪里ness是。对我来说也不是太离题。落选很可能是因为你没有展示你迄今为止所做的尝试。也就是说，我正在寻找答案。还有Marcos，我不是要找“书籍、工具、软件库、教程或其他非现场资源”好的，这确实很有帮助。我会记住所有这些，以备将来的问题。不过，如果在删除帖子之前像以前一样对问题进行命名并提出改进建议会更好一些。这非常有效，正是我想要的。如果允许的话，我可以问一下如何以不同的方式显示按钮吗等待他们的变量是真是假？啊，是的，我想我明白你的意思了，因为文本框改变了它们的状态，所以有点让人困惑，但我会尝试让一些东西工作。另外，经过一点测试，搜索框过滤器似乎不起作用。现在它独立于按钮运行，并且只根据你所做的设置可见性类型，它是否应该有不同的行为？它应该实时过滤这两个类，但对类进行优先级排序。因此，当我开始在框中键入“banana”时，它应该隐藏列表项，但如果我隐藏了类“a”，那么它将不会返回任何结果。
var hiddenClass = [];
var buttons = document.getElementsByClassName('toggleBtn');
for(var i = 0; i < buttons.length; i++){
  buttons[i].addEventListener('click', function(){
    var self = this;
    var elements = document.getElementsByClassName(self.value);
    toggleButtonState(self);
    for(var i = 0; i < elements.length; i++) {
      var element = elements[i];

      var isHidden = false;
      var classes = element.className.split(' ');
      for(var j = 0; j < classes.length; j++){
        if(hiddenClass.indexOf(classes[j]) !== -1) isHidden = true;
      }

      var vis = elements[i].style.visibility;
      if(vis === 'hidden' && !isHidden){
        setVisibility(element, 'visible');
      } else {
        setVisibility(element, 'hidden');
      }
    }
  });  
}

var input = document.getElementById('classFilter');

input.addEventListener('input', function(){
  var food = document.getElementsByClassName('food');
  for(var i = 0; i < food.length; i++){
    var ele = food[i];
    if(ele.innerHTML.toLowerCase().indexOf(input.value.toLowerCase()) === -1) {
      setVisibility(ele, 'hidden');
    }else {
      isHidden = false;
      var classes = ele.className.split(' ');
      for(var j = 0; j < classes.length; j++){
        if(hiddenClass.indexOf(classes[j]) !== -1) isHidden = true;
      }

      if(!isHidden) setVisibility(ele, 'visible');
    }
  }
});

function setVisibility(element, visibility){
  element.style.visibility = visibility;
}

function setVisibilityByClass(name, visibility) {
  var elements = document.getElementsByClassName(name);
  for(var i = 0; i < elements.length; i++){
    setVisibility(elements[i], visibility);
  }
}

function toggleButtonState(element){
  var on = element.className.indexOf('on') !== -1;
  if(on){
    element.className = 'toggleBtn off';
    if(hiddenClass.indexOf(element.value) === -1) hiddenClass.push(element.value);
  }
  if(!on){
    element.className = 'toggleBtn on';
    hiddenClass = hiddenClass.filter(function(x) { return x !== element.value });
  }  
}

<div id="buttons">
  <input type="button" class="toggleBtn on" value="a" />
  <input type="button" class="toggleBtn on" value="b"   />
  <input type="button" class="toggleBtn on" value="c"   />

  <input type="text" id="classFilter"  />
</div>

<ul>
    <li class="food a b c">Apple</li>
    <li class="food a">Banana</li>
    <li class="food b">Carrot</li>
    <li class="food b c">Drink</li>
</ul>

  .off {
    background-color: grey;
  }

<button data-key="a">A</button>
<button data-key="b">B</button>
<button data-key="c">C</button>
<button data-key="d">D</button>
<button data-key="all">Show All</button>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Carrot</li>
    <li>Drink</li>
</ul>

/* This is a basic example of how jQuery works, 
 * but with native JavaScript & without jQuery:
 */
function $(str) {
  if (str.indexOf(' ') > -1) {
    var results = document.querySelectorAll(str);
  } else if (str[0] === '#') {
    var results = document.getElementById(str.replace('#',''));
  } else if (str[0] === '.') {
    var results = document.getElementsByClassName(str.replace('.',''));
  } else {
    var results = document.getElementsByTagName(str);
  }
  return results;
}

// So you can use dollar sign function names, as shortcuts, as shown below:
function showAll(liTags) { // This is useful for the next button click.
  if (!liTags) {
     liTags = $('li');
  }
  for (var i=0; i<liTags.length; i++) {
    var liTag = liTags[i];
    liTag.style.visibility = 'visible';
  }
}

function clickHandler() {
  var key = this.dataset.key; // Gets the data-key attribute.
  var liTags = $('li');
  showAll(liTags);

  if (key !== 'all') {
    // Hide all but current one.
    for (var i=0; i<liTags.length; i++) {
      var liTag = liTags[i];
      var text = liTag.innerText.toLowerCase();
      if (text.indexOf(key) > -1) {
        liTag.style.visibility = 'visible';
      } else {
        liTag.style.visibility = 'hidden';
      }
    }
  }
}

(function init() {
   var results = $('button');
   for (var i=0; i<results.length; i++) {
       results[i].addEventListener("click", clickHandler);
   }
})(); // Self-loading function, which runs only 1x on Page Load.