建议使用class命名,然后使用data-id来存储id。因为id属性不能相同,并且不能以数字开头,这不符合规范。
具体更改的代码如下:
<li class="z_time" data-id="310" data-time="2020-06-01 19:26:43">70分</li>
<li class="z_time" data-id="310" data-time="2020-06-01 19:27:12">72分</li>
<li class="z_time" data-id="310" data-time="2020-06-01 19:28:33">71分</li>
<li class="z_time" data-id="311" data-time="2020-06-01 19:29:11">70分</li>
<li class="z_time" data-id="312" data-time="2020-06-01 19:30:44">75分</li>
<li class="z_time" data-id="312" data-time="2020-06-01 19:32:41">73分</li>
<li class="z_time" data-id="313" data-time="2020-06-01 19:33:51">73分</li>
<script>
var oZTime = document.querySelectorAll(".z_time"); //获取li元素
var i,j,t1,t2,id1,id2; //提前声明
//第一层遍历
for(i = 0; i < oZTime.length; i++){
t1 = oZTime[i].getAttribute("data-time"); //获取时间
id1 = oZTime[i].getAttribute("data-id"); //获取data-id属性
//第二层遍历
for(j = 0; j < oZTime.length; j++){
//获取当前遍历的元素属性
t2 = oZTime[j].getAttribute("data-time");
id2 = oZTime[j].getAttribute("data-id");
//如果两个元素的id相同
if(id1 == id2){
//将元素的data-time属性的值转为时间戳
var rt1 = new Date(t1).getTime(),
rt2 = new Date(t2).getTime();
//验证是否是同一个元素(时间戳相同则为同一个,则不进行处理)
if(rt1 != rt2){
//判断时间戳谁比较大,则隐藏对应的元素
if(rt1 > rt2){
oZTime[j].style.display = "none";
}else{
oZTime[i].style.display = "none";
}
}
}
}
}
</script>
追问你好师兄,我从ie11和手机ios下的遨游浏览器和ios的edge浏览器下面试了试,发现ie11和手机ios下的遨游浏览器和ios的edge浏览器下面都是隐藏的,哪里出现问题了吗?不兼容ie11和手机ios下的遨游浏览器和ios的edge浏览器。
google的chrome 和edge chrome版正常。就是ie11等有兼容问题。
![](https://video.ask-data.xyz/img.php?b=https://iknow-pic.cdn.bcebos.com/8d5494eef01f3a2955c2eeb38925bc315c607c40?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto)