Question

我正在寻找一种方法来过滤从后端获得的项目。基本上，我正在做的是

<div class="items">
   <?php foreach ($items as $item) { 
    <a> $item </a> }
 ?>
</div>

基本上，我从数据库中获取$items作为数组。此数组包含时间

$items
{
    0 => 12:00:00 
    1 => 13:00:00
    2 => 14:00:00
    3 => 15:00:00
    4 => 09:00:00 }

我希望将这些打印时间过滤为morning 09:00:00 to 12:00:00，而12:00:00 to 18:00:00和<{1}}

所以，我将有一个名为Morning的过滤按钮，当我点击该按钮时我想打印时间从9到12，如果点击日期按钮，它将只打印13到15之间的时间。 / p>

我尝试从后端发送过滤后的项目，但它只是速度较慢，因为我有很多次，我认为从Javascript / Angular这样做会好得多，但我不确定如何开始。任何帮助将非常感激。

Answer 1

如果过滤可以在服务器端完成，那就更好了。但是，如果您想要在前端进行操作，可以使用下面的代码。

我认为您会向用户显示数组items。如果用户点击按钮morning（分别为afternoon），则会过滤相关项目以使其具有相应值。

<script type="text/javascript">

var items = "<?php echo $items ?>"; 

var saveItems = items;

$("#morning").on("click", function(){

 items = saveItems.filter(element => element < "12:00:00 ")
})

$("#afternoon").on("click", function(){

 items = saveItems.filter(element => element > "12:00:00")
})
$("#reset").on("click", function(){

 items = saveItems
})
</script>

<button id="morning">Morning </button>
<button id="afternoon">Afternoon </button>
<button id="reset">Reset </button>

Answer 2

考虑你有一个像这样的时间数组：

myArray =[
     "12:00:00", 
     "13:00:00",
     "14:00:00",
     "15:00:00",
     "09:00:00"
     ]
var n = myArray.length;     
     
function A(){
  for( var i = 0 ; i < n ; i++){
    var num =  parseInt(myArray[i].slice(0,2));
    if( 9 <= num && num <= 12 ){
      myArray[i] = myArray[i] + " morning"; 
    }
    else{
      myArray[i] = myArray[i] + " evening"; 
    }
  }
}  
A();
console.log(myArray)

Answer 3

在PHP代码的foreach循环中，您可以在每个项目上设置过滤器类。类似的东西：

$hour = explode( ':', $item)[0] );
$class = $hour <= 12 : 'morning' : 'day';
echo "<a class='$class' >$item</a>";

这是一个jsfiddle，显示了在前端显示/隐藏这些元素的一种方法。 https://jsfiddle.net/mqcbfuhy/

Answer 4

如果您想使用javascript进行任何类型的客户端时间显示/评估/操作，那么在您花费多年时间编写自定义代码之前，您应该查看moment.js。它几乎可以解决与时间相关的所有问题。

使用Javascript过滤从PHP返回的项目

4 个答案: