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

I have searched far and wide for this but can't quite find what I need. I have a list as such:

我为此搜索了很多但是找不到我需要的东西。我有一个列表:

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

All I need is 3 buttons that toggle variables true and false that will show/hide the list items with the corresponding class for each variable. Then a search box that will filter out the list items without the (not case sensitive) string in them. For instance checking the box labelled "a" will only show "Apple" and "Banana" but typing in "b" into the search box will only show "Banana".

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

This is what I have tried so far:

这是我到目前为止所尝试的:

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

Then the Javascript:

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

I have not yet figured out how to take a string from a text box.

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

How would I do this as simply as possible. "Simplest" being with the least code and vanilla javascript with no surplus features. I do not need animation or fancy graphics, just a show and hide based on the criteria. I will also note I'm reasonably new to JS and just cannot understand JQuery at all.

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

Thanks in advance.

提前致谢。

Olie.

Also: If I have missed another question requesting the same info then do tell me.

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

3 个解决方案

#1

I have created toggle buttons for your three classes, and an input that sets visibility based on the content of your list items.

我为您的三个类创建了切换按钮,并根据列表项的内容设置了可见性。

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

Got a fiddle working, had to change the listeners a bit to work in their environment: https://jsfiddle.net/b9jp7m1g/1/

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

3 个解决方案

#1

更多相关文章

随机推荐