Question

我正在尝试使用基于数据属性的日期范围进行过滤，因此无法正常工作。我可以使用基于文本的过滤功能，但不能使用日期范围。

HTML代码：

<div class="notificationCard" data-details="Change"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="6/21/2020" style="display: block;">
    Some stuff
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="7/21/2020" style="display: block;">
    Some stuff
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="9/10/2020" style="display: block;">
    Some stuff
</div>

JavaScript代码是

var $notificationCards = $('.notificationCard');
$notificationCards.filter("[data-filter-statusdate='5/20/2020'],[data-filter-statusdate='7/22/2020']").show();

我希望只出现前两个div，但没有一个出现。有人可以告诉我我在做什么错。

这里是Fiddle

Answer 1

您不能以这种方式使用属性选择器，因为它们只能匹配特定的值。您可以改为从开始和结束字符串创建Date，然后循环遍历所有div，如果日期小于开始日期大于结束日期（即不在范围内），则将其隐藏

function filter()
{
 var $notificationCards = $('.notificationCard');
 let start = new Date('5/20/2020'), end = new Date('7/22/2020');
 $notificationCards.each(function(){
  let date = new Date($(this).data('filter-statusdate'));
  if(date < start || date > end){
    $(this).hide();
  }
 });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="notificationCard" data-details="Change"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="6/21/2020" style="display: block;">
    Some stuff (6/21/2020)
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="7/21/2020" style="display: block;">
    Some stuff (7/21/2020)
</div>
<div class="notificationCard" data-details="Review"
     data-filter-wftype="GVChangeReview"
     data-filter-statusdate="9/10/2020" style="display: block;">
    Some stuff (9/10/2020)
</div>

<button onclick=filter()>Filter between 5/20/2020 and 7/22/2020</button>

使用jQuery进行基于属性的过滤

1 个答案: