使用Javascript创建过滤器栏

Question

我是Javascript的新手，在这个阶段只对它有非常基本的了解。 我正在尝试创建一个过滤条，单击此按钮时，会将不匹配项的不透明度设置为0.2，匹配项将保持完全不透明度。

我上传了html / css以显示jsfiddle的示例：https://jsfiddle.net/rebeccasmith1301/zw2aozff/

<div id="filter-bar">
   <button onclick="findShoes()">Shoes</button>
   <button onclick="findTops()">Tops</button>
   <button onclick="findSkirts()">Skirts</button>
</div>
<div class="product-item">
   <p>Shoes</p>
</div>
<div class="product-item">
    <p>Tops</p>
</div>

        

裙

   

我一直在尝试使用上一篇文章写的javascript，我觉得这很有帮助但是由于我的基本知识，我无法解决如何实现我的目标。

我基本上希望用户能够点击按钮鞋（例如）和包含单词鞋的所有div保持完全不透明度，所有其他div都使该类未选中哪个降低不透明度为0.2。包含产品的div可以只是一个类，也不是id。

有人能帮忙吗？这将主要使用vanilla javascript。

非常感谢，

贝克

Answer 1

摆弄多个单词： https://jsfiddle.net/qucwvqfr/1/

摆弄空白区域：https://jsfiddle.net/d15v3x0w/1/

不要为每个可能的内容变化创建一个函数，只需创建一个函数并赋予该参数。这个javascript将检查项目的textContent，从中删除空格，并相应地更改类。 hasClass，addClass和removeClass是帮助者，专注于highlightItems功能。

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}

var highlightItems = function(itemName) {
    var p = document.getElementsByClassName("product-item");
    for (var i = 0; i < p.length; i++) {
        itemText = p[i].textContent.replace(/^\s+|\s+$/g,''); // you don't need the .replace() part if you don't add extra white space in the HTML
        if ( !(itemText == itemName) ) {
            addClass(p[i], "un-selected");
        } else {
            removeClass(p[i], "un-selected");
        }
    }
}

你会像这样使用它：

<div id="filter-bar">
    <button onclick="highlightItems('Shoes')">Shoes</button>
    <button onclick="highlightItems('Tops')">Tops</button>
    <button onclick="highlightItems('Skirts')">Skirts</button>
</div>

注意：

如果您希望框内有多个单词，请不要在div标记内添加任何不必要的空白区域。 （你可能不应该这样做。）所以HTML用法就像这样：

<div class="product-item">Shoes and socks</div>
<div class="product-item">Tops</div>
<div class="product-item">Skirts</div>

课程更改功能的学分转至http://jaketrent.com/post/addremove-classes-raw-javascript/

Answer 2

需要有一种可靠的方法来选择指定的项目。我建议您将一个类shoes，tops和skirts添加到各自的元素中：

<div class="product-item shoes">
    Shoes
</div>
<div class="product-item tops">
    Tops
</div>
<div class="product-item skirts">
    Skirts
</div>

现在，要选择所有获得shoes的元素，这很容易：

var shoes = document.getElementsByClassName('shoes');

选择没有课程shoes的元素是另一个故事。假设我们首先收集所有product-item元素，如下所示：

var products = document.getElementsByClassName('product-item');

从此开始，您需要迭代返回的nodeList中的所有元素，并检查它们是否有shoes类。一个帮助你的辅助函数：

function not(nodeList, cls){
    var reg = new RegExp('\\b' + cls + '\\b');
    return Array.prototype.reduce.call(nodeList, function(acc, el){
        console.log(el, el.className.search(reg))
        if(el.className.match(reg) === null){
           acc.push(el);
        }
        return acc;
    }, []); 
}

现在，要获得不是products的{​​{1}}：

shoes

要更改nodeList中所有元素的不透明度，我们可以使用另一个辅助函数：

var notShoes = not(products, 'shoes');

使用它：

function changeOpacity(nodeList, opacity){
    Array.prototype.forEach.call(nodeList, function(el){
        el.style.opacity = opacity;
    });
}

此片段中的所有内容：

changeOpacity(shoes, 1.0);
changeOpacity(notShoes, 0.2);

function find(cls) {
    var clsList = document.getElementsByClassName(cls);
    var products = document.getElementsByClassName('product-item');
    var notCls = not(products, cls);
    changeOpacity(clsList, 1.0);
    changeOpacity(notCls, 0.2);
}

function not(nodeList, cls){
    var reg = new RegExp('\\b' + cls + '\\b');
    return Array.prototype.reduce.call(nodeList, function(acc, el){
        console.log(el, el.className.search(reg))
        if(el.className.match(reg) === null){
           acc.push(el);
        }
        return acc;
    }, []); 
}

function changeOpacity(nodeList, opacity){
    Array.prototype.forEach.call(nodeList, function(el){
        el.style.opacity = opacity;
    });
}

/* Styling for filter bar*/
#filter-bar{
    width: 100%
}
    #filter-bar button{
        width: 30%
        float: left;
        margin: 0.5%;
    }
/* Styling for products*/
.product-item{
    width: 24%;
    float: left;
    margin: 0.5%;
    background-color: red;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
    opacity: 0.2;
}

Answer 3

我有 jquery 的解决方案：

<强> HTML

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Tops</button>
<button class="btn" id="b">Skirts</button>
<button class="btn" id="c">Shoes</button>

<!-- An element with an id is needed for the jQuery -->
<div id="parent">
  <!-- The base class is the box. Categories are then given as accessory classes. Any div can be in more than one category -->
  <div class="box product-item a b">Shoes &amp; Tops</div>
  <div class="box product-item a">Tops</div>
  <div class="box product-item b">Skirts</div>
  <div class="box product-item c">Shoes</div>
</div>

<强> CSS

/* Styling for filter bar*/
#filter-bar{
    width: 100%
}
#filter-bar button{
    width: 30%
    float: left;
    margin: 0.5%;
}
/* Styling for products*/
.product-item{
    width: 24%;
    float: left;
    margin: 0.5%;
    background-color: red;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
    opacity: 0.2;
}

<强>的jQuery

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

jsfiddle

Answer 4

function filter(me) {

  var items = document.getElementsByClassName("product-item");
  console.log(me.textContent);
  
  for (var i = 0; i < items.length; i++) {
    
    var item = items[i];
    item.style.display = "";
  
    if (item.textContent.trim() !== me.textContent.trim() && me.textContent.trim() !== "All") {
      item.style.display = "none";
    }
  
  }
}

/* Styling for filter bar*/
#filter-bar{
    width: 100%
}
    #filter-bar button{
        width: 30%
        float: left;
        margin: 0.5%;
    }
/* Styling for products*/
.product-item{
    width: 24%;
    float: left;
    margin: 0.5%;
    background-color: red;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
    opacity: 0.2;
}

<div id="filter-bar">
	<button onclick="filter(this)">Shoes</button>
	<button onclick="filter(this)">Tops</button>
	<button onclick="filter(this)">Skirts</button>
    <button onclick="filter(this)">All</button>
</div>


<div class="product-item">
	Shoes
</div>
<div class="product-item">
	Tops
</div>
<div class="product-item">
	Skirts
</div>
<div class="product-item">
	Skirts
</div>
<div class="product-item">
	Shoes
</div>
<div class="product-item">
	Tops
</div>
<div class="product-item">
	Skirts
</div>
<div class="product-item">
	Skirts
</div>