对象中的id值满足连续四个相同的情况

一朵叶子

已于 2023-05-23 10:28:24 修改

阅读量132

点赞数

文章标签： html jquery 前端

于 2023-05-22 19:00:39 首次发布

本文链接：https://blog.csdn.net/yjy528/article/details/130810333

版权

文章展示了一段JavaScript代码，用于检查数据数组中是否有连续四个id值相同的对象。如果找到，将对应HTML元素的背景点亮，以便进行后续的交互操作。HTML和CSS部分展示了列表项的样式，以及被选中时的高亮效果。

摘要由CSDN通过智能技术生成

一组对象，满足连续四个的id值相同，就点亮背景，方便进行后续一些交互操作

var data = [
        {"id":2,"state":0,"index":0},
        {"id":3,"state":0,"index":1},
        {"id":3,"state":0,"index":2},
        {"id":3,"state":0,"index":3},
        {"id":3,"state":0,"index":4},
        {"id":2,"state":0,"index":5},
        {"id":4,"state":0,"index":6},
        {"id":4,"state":0,"index":7},
        {"id":4,"state":0,"index":8},
        {"id":4,"state":0,"index":9},
        {"id":5,"state":0,"index":10},
        {"id":6,"state":0,"index":11},
        {"id":5,"state":0,"index":12},
        {"id":5,"state":0,"index":13},
        {"id":5,"state":0,"index":14},
        {"id":5,"state":0,"index":15},
    ]
    var str = "";
    var count = 0;
    var temp = data[0].id;
    var arr =  [];
    for(var i = 0;i < data.length; i++){
        str += "<li>" + data[i].index + "</li>";
        if(i < data.length){
            if(temp == data[i].id){
                count++;
                if(count >= 3){
                    arr.push(data[i].id)
                }
            }else{
                count = 0;
                temp = data[i].id;
            }
        }
    }
    console.log(arr)
    $(".box").html(str);
    for(var i = 0 ;i < data.length; i++){
        for(var j=0;j<arr.length;j++){
            if(data[i].id == arr[j]){
                console.log(i)
                $(".box li").eq(i).attr("class","active")
            }
        }
    }

效果图：

html和css

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <title>_</title>
    <link href="../css/activityapp.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="../js/activityapp.js" type="text/javascript"></script>
</head>
<style>
.box li{background: #eeeeee;width: 10px;height:10px;margin: 3px;float: left;}
.box li.active{background: #bb1d37;}
</style>
<body>
    <ul class="box"></ul>
</body>
</html>