Question

USECASE：

我有一个大约1000个项目的列表，并希望有一个“日期范围过滤器”来显示/隐藏两个日期之间的元素。

你会怎么做？

我正在考虑将一个带有“date”或“timestamp”的选择器应用于每个元素，并循环遍历Datepicker Range的所有元素onChange。

这对你有意义，也许有人有这方面的例子吗？我的大脑目前处于冻结模式，我可以使用一些灵感......

Answer 1

最好使用“过滤”功能。

您可以定义自己的返回值，避免使用循环。

$(function() {
    $("div[id]").filter(function(){
      var code = +$(this).prop("id").split("_")[1];
      var flag = false;
      
      if( code > 4 ){
        flag = true;
      }
      
      return flag;
    }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test_1">1<div>
<div id="test_2">2<div>
<div id="test_3">3<div>
<div id="test_4">4<div>
<div id="test_5">5<div>
<div id="test_6">6<div>

Answer 2

我个人会使用VueJs（或其他框架，如AngularJs等）。使用v-if指令，它应该是一个非常简单的实现。

由于代码段中不支持vueJs，因此我在这里写一个工作示例。 2017-03-03＆amp;＆amp; 2018-03-3只是用于演示目的的随机日期。您可以使用vueJs进行循环，并处理10行代码中的所有1000个元素

# html
<div id="app">
  <span v-if="'2017-03-03' >= dateFrom && '2017-03-03' <= dateTo">
    You see me
  </span>
  <span v-if="'2018-03-03' >= dateFrom && '2018-03-03' <= dateTo">
    Not see me
  </span>
</div>

# vueJs
var app = new Vue({
  el: '#app',
  data: {
    dateFrom: '2017-01-01',
    dateTo: '2017-01-01'
  }
})

当然，您需要使用一些计算属性来更改实现，但这足以打开方式。

您可以在此page
找到有关条件渲染的信息
您可以找到有关列表呈现here
的信息

我希望它对您有所帮助并有意义！

Answer 3

这是我最终使用的代码：

HTML：

<li id="xxx" rel="<?=strtotime($row['date'])?>">
    some content
</li>

Jquery的：

<script type="text/javascript">
$(document).ready(function()
{   
    //range defined by datepicker

    $(".range").change(function(e){
        var tfrom = new Date($('#from').val()).getTime() / 1000;
        var tto =  new Date('$('#to').val()).getTime() / 1000;

        $('li').filter(function(){
            var rel = $(this).attr('rel');
            var flag = false;

            if( rel > tto || rel < tfrom ){
                flag = true;
            }
            return flag;
        }).hide();
    });
});     
</script>

尽可能地工作。再次感谢！

在特定日期范围内显示/隐藏元素的最佳方法

3 个答案: