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

Posted 2023-03-05

【中文标题】具有多个数据属性的 jQuery 过滤器 div

【英文标题】：jQuery filter div with multiple data attributes

【发布时间】：2021-07-31 12:35:29

【问题描述】：

我有一个带有 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 有 data-明星=“好”

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

提前致谢！

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

【问题讨论】：

嗨，你的意思是this？

关于一个 data- 属性中的多个值 - 是的，这是可能的。该值是纯字符串，因此您可以split 获取值数组，然后您可以使用includes 检查某个值是否在数组中。

@Swati 如果我选择 PHP 和 Bad 复选框，它会显示比它应该显示的更多，它应该只显示具有 data-tag="php" 和 data-star="bad"

您需要将它们分成几组，第一组将有 php、css 等，下一组将有 good/bad。目前所有值都存储在一个数组中，因此很难确定使用哪一个。

【参考方案1】：

您可以使用&& 运算符。

  $(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="#" ></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="#" ></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="#" ></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="#" ></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="#" ></div>
      </div>
      <div class="tRowInfo">
        <div class="tRowName">css</div>
        <p>good</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

它隐藏了所有内容，而不是只显示选定的内容