最好的方法來顯示/隱藏要素在一定日期範圍內

Question

USECASE：

我有大約1000項列表，並希望能有一個「日期範圍過濾器」顯示/隱藏元件，其之間的給出2個日期。

你會怎麼做呢？

我在考慮對每個元素應用帶有「date」或「timestamp」的選擇器，並遍歷DateCicker範圍的所有元素onChange。

這對你有意義嗎？也許任何人都有這樣的例子嗎？ 我的大腦處於凍結模式目前，我可以利用一些啓發......

Answer 1

這是我最後使用的代碼：

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> 

作品應該儘可能地工作。再次感謝！

Answer 2

我會親自使用VueJs（或類似AngularJs等其他框架）。有了v-if指令，它應該是一個非常簡單的實現。

因爲代碼段中不支持vueJs，所以我在這裏寫一個工作示例。 2017-03-03 & & 2018-03-3只是用於演示目的的隨機日期。你真的可以做一個循環中使用vueJs和處理所有1000個元素在10行代碼

# 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

最好使用「過濾器」功能。

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

$(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>