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

【问题标题】：HTML Simplest hide/show and class filterHTML 最简单的隐藏/显示和类过滤器
【发布时间】：2016-07-20 05:04:44
【问题描述】：

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

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

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

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

提前致谢。

奥利。

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

【问题讨论】：

stackoverflow 中的离题
我问了一个问题：“我怎样才能尽可能简单地做到这一点？”。这是关于编码的主题。老实说，我看不出“离题”在哪里。
对我来说似乎也不是话题。 Downvotes 可能是因为您没有展示到目前为止您已经尝试过的内容。那就是说我正在寻找答案
另外，Marcos，我并不是要查找“书籍、工具、软件库、教程或其他非现场资源”
好的，这确实有帮助。对于以后的问题，我会记住所有这些。虽然如果在删除帖子之前提出问题并提出改进建议会更好一些，就像我以前一样。

标签： javascript html filter

【解决方案1】：

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

.hideDom {
    display: none;
}

2) 然后在代码区域中，我将 css 切换为“on”和“off”以隐藏和显示 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");

【讨论】：

【解决方案2】：

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

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

有一个小提琴工作，不得不稍微改变听众才能在他们的环境中工作：https://jsfiddle.net/b9jp7m1g/1/

【讨论】：

这很完美，正是我想要的。如果这是允许的，那么我可以问我如何根据它们的变量是真还是假来以不同的方式显示按钮吗？
啊，我想我明白你的意思了，这有点令人困惑，因为文本框会改变它们的状态，但我会尝试让一些工作正常
同样经过一番测试，搜索框过滤器似乎不起作用。
现在它的功能独立于按钮并仅根据您键入的内容设置可见性，它应该表现不同吗？
它应该实时过滤，但优先考虑类。因此，当我开始在框中输入“banana”时，它应该隐藏没有它的列表项，但如果我隐藏了“a”类，那么它不会返回任何结果。

【解决方案3】：

这是一个示例，说明如何以 HTML 5 方式干净地完成此操作，仅使用本机 JavaScript。这不使用类名，而是关闭实际的小写数据。它还将展示一个基本示例，说明 jQuery 如何使用 $ 作为函数名，以及它如何在本机 JS POV 中工作。这是我用于此演示的jsfiddle。

HTML：

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

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.

【讨论】：