相同id的 div 只显示data-time(数据库addtime)最新的那1个,请问一下师兄们,这样的js该怎么写?

其他的div隐藏 display:none;就行
<li id="310" data-time="2020-06-01 19:26:43">70分</li>
<li id="310" data-time="2020-06-01 19:27:12">72分</li>
<li id="310" data-time="2020-06-01 19:28:33">71分</li>
<li id="311" data-time="2020-06-01 19:29:11">70分</li>
<li id="312" data-time="2020-06-01 19:30:44">75分</li>
<li id="312" data-time="2020-06-01 19:32:41">73分</li>
<li id="313" data-time="2020-06-01 19:33:51">73分</li>
id相同的li,只显示data-time最新的那条信息,除了显示的这条id外,其他的display:none;师兄们这样的js怎么写呢?

建议使用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等有兼容问题。

温馨提示:答案为网友推荐,仅供参考
相似回答