在特定日期范围内显示/隐藏元素的最佳方法
在特定日期范围内显示/隐藏元素的最佳方法
提问于 2017-10-19 17:36:54
泌尿酶：
我有一个大约1000个项目的列表，并希望有一个“日期范围过滤器”来显示/隐藏元素，这些元素在两个给定日期之间。
你会怎么做？
我正在考虑对每个元素应用一个带有“日期”或“时间戳”的选择器，并在数据交换范围的所有元素onChange上循环。
这对你来说有意义吗?也许任何人都有这样的例子？我的大脑目前处于冻结状态，我需要一些灵感.
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-10-24 09:50:06
这是我最后使用的代码：
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>工作得恰到好处。再次感谢！
Stack Overflow用户
发布于 2017-10-19 18:00:50
最好使用“过滤器”函数。
您可以定义自己的返回值，避免使用循环。
$(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>
Stack Overflow用户
发布于 2017-10-19 17:57:18
我会亲自使用VueJs (或另一个框架，如AngularJs等)。使用v-if指令，它应该是一个非常简单的实现。
因为代码片段中不支持vueJs，所以我在这里编写了一个工作示例。2017-03-03 && 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'
}
})当然，您需要使用一些计算属性来更改实现，但这足以打开道路。
我希望它对你有帮助，并且对你有意义！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46835758
复制相关文章
相似问题
腾讯云开发者
