具有多个数据属性的jQuery过滤器div

问题描述

我有一个带有 2 个数据属性的 div，我想根据选中的输入框显示/隐藏，但使用我当前的代码，我只能使用 1 个数据属性，即 data-tag。

$(document).ready(function() {
  $('.category').on('change',function() {
    var category_list = [];
    $('#filters :input:checked').each(function() {
      var category = $(this).val();
      category_list.push(category);
    });

    if (category_list.length == 0)
      $('.resultblock').fadeIn();
    else {
      $('.resultblock').each(function() {
        var item = $(this).attr('data-tag');
        console.log(item)
        if (jQuery.inArray(item,category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }
  });
});

编辑： 我想要实现的是基于选中的 data-tag 和 data-star

显示/隐藏 div

例如：当我检查 PHP 标签时，所有 data-tag="PHP" 都会显示，而当我检查 Good 标签时，它只会显示所有带有 data-tag="PHP" 的 div 有数据-星=“好”

请在此处查看我的完整代码https://jsfiddle.net/0hfgckds/

提前致谢！

附言。是否可以对 data-tag="att1 att2" 等单个数据使用多个属性？如果是这样，我该如何修改代码？

解决方法

您可以使用 && 运算符。

  $(document).ready(function(){
  $('.category').on('change',function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      // console.log(category);
      category_list.push(category);
    });
    
    if(category_list.length == 0)
      $('.resultblock').fadeIn();
      else {
        $('.resultblock').each(function(){
          tags = $(this).attr('data-tag');
          stars = $(this).attr('data-star');
          
          if(jQuery.inArray(tags,category_list) > -1 && jQuery.inArray(stars,category_list) > -1)
            $(this).fadeIn('slow');
          else
            $(this).hide();
        });
      }
  });
});

.tRowInfo p {
  font-size: 80%;
}

.tRowName {
  margin-bottom: 5%;
  text-decoration: underline;
  text-decoration-color: black;
}

.tRow {
  width: 49%;
}

.tRowItem {
  display: flex;
  background: red;
  border-style: solid;
  margin-bottom: 2%;
  padding: 20px;
}

.matIcon {
  border-radius: 5px;
  margin-right: 10px;
  position: relative;
  width: 64px;
  height: 78px;
  background-image: url("#");
  background-size: contain;
  background-repeat: no-repeat;
}

.tRowRare {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.tRowRare img {
  height: 20px;
}

.matImg img {
  height: 64px;
  width: 64px;
}

.tableWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 400px) {
  .tableWrapper {
    flex-direction: column;
  }
  .tRow {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="filters">
  <div class="filterblock">
    <input id="check1" type="checkbox" name="check" value="php" class="category">
    <label for="check1">PHP</label>
  </div>
  <div class="filterblock">
    <input id="check2" type="checkbox" name="check" value="html" class="category">
    <label for="check2">HTML</label>
  </div>
  <div class="filterblock">
    <input id="check3" type="checkbox" name="check" value="css" class="category">
    <label for="check3">CSS</label>
  </div>
  <div class="filterblock">
    <input id="check4" type="checkbox" name="check" value="good" class="category">
    <label for="check4">good</label>
  </div>
  <div class="filterblock">
    <input id="check5" type="checkbox" name="check" value="bad" class="category">
    <label for="check5">bad</label>
  </div>
</div>

<div class="tableWrapper">
  <div class="tRow resultblock" data-tag="php" data-star="good">
    <div class="tRowItem">
      <div class="matIcon">
        <div class="matImg"><img src="#" alt=""></div>
      </div>
      <div class="tRowInfo">
        <div class="tRowName">php</div>
        <p>good</p>
      </div>
    </div>
  </div>
  <div class="tRow resultblock" data-tag="css" data-star="good">
    <div class="tRowItem">
      <div class="matIcon">
        <div class="matImg"><img src="#" alt=""></div>
      </div>
      <div class="tRowInfo">
        <div class="tRowName">css</div>
        <p>good</p>
      </div>
    </div>
  </div>
  <div class="tRow resultblock" data-tag="php" data-star="bad">
    <div class="tRowItem">
      <div class="matIcon">
        <div class="matImg"><img src="#" alt=""></div>
      </div>
      <div class="tRowInfo">
        <div class="tRowName">php</div>
        <p>bad</p>
      </div>
    </div>
  </div>
  <div class="tRow resultblock" data-tag="html" data-star="bad">
    <div class="tRowItem">
      <div class="matIcon">
        <div class="matImg"><img src="#" alt=""></div>
      </div>
      <div class="tRowInfo">
        <div class="tRowName">html</div>
        <p>bad</p>
      </div>
    </div>
  </div>
  <div class="tRow resultblock" data-tag="css" data-star="good">
    <div class="tRowItem">
      <div class="matIcon">
        <div class="matImg"><img src="#" alt=""></div>
      </div>
      <div class="tRowInfo">
        <div class="tRowName">css</div>
        <p>good</p>
      </div>
    </div>
  </div>
</div>