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，它们将显示/隐藏每个变量的相应类的列表项。然后是一个搜索框，它将过滤掉列表项而不包含（不区分大小写）字符串。例如，选中标有＆＃34; a＆＃34;只会显示＆＃34; Apple＆＃34;和＃34;香蕉＆＃34;但输入＆＃34; b＆＃34;进入搜索框只会显示＆＃34; Banana＆＃34;。

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

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

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

我如何尽可能简单地做到这一点。＆＃34;最简单＆＃34;使用最少的代码和vanilla javascript，没有多余的功能。我不需要动画或花哨的图形，只需要根据标准显示和隐藏。我还会注意到我对JS来说相当新，根本无法理解JQuery。

提前致谢。

OLIE。

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

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

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

Answer 2

希望这会有所帮助。我如何隐藏和显示可能或影响几个不同区域的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");

Answer 3

以下是一个示例，说明如何使用本机JavaScript以HTML 5方式干净地完成此操作。这不使用类名，而是关闭实际的小写数据。它还将显示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.

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

3 个答案: