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

Question

我为此进行了广泛的搜索，但找不到我需要的东西。我有一个这样的列表:

<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>

我只需要 3 个按钮来切换变量 true 和 false，这将显示/隐藏列表项以及每个变量的相应类。然后是一个搜索框，它将过滤掉其中没有(不区分大小写)字符串的列表项。例如，选中标记为“a”的框将仅显示“Apple”和“Banana”，但在搜索框中输入“b”将仅显示“Banana”。

这是我目前尝试过的:

<button onClick="toggle(a)">A</button>
<button onClick="toggle(b)">B</button>
<button onClick="toggle(c)">C</button>
<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:

var a, b, c;
function toggle(i) {
    if (i) {i = false
    }else {i = true};
};

if (a) {
    document.getElementsByClassName('a').style.visibility='shown';
}else {
    document.getElementsByClassName('a').style.visibility='hidden';
};

if (b) {
    document.getElementsByClassName('b').style.visibility='shown';
}else {
    document.getElementsByClassName('b').style.visibility='hidden';
};

if (c) {
    document.getElementsByClassName('c').style.visibility='shown';
}else {
    document.getElementsByClassName('c').style.visibility='hidden';
};

我还没有想出如何从文本框中获取字符串。

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

提前致谢。

奥利。

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

Answer 1

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

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 });
  }  
}

HTML

<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>

CSS

  .off {
    background-color: grey;
  }

有一个 fiddle 在工作，必须稍微改变听众才能在他们的环境中工作:https://jsfiddle.net/b9jp7m1g/1/