js/jq implements simple evaluation component encapsulation

Renderings:

insert image description here

!](https://img-blog.csdnimg.cn/09757b4f34b8421a8f909fe74cc2aeb5.png)

1. Sometimes projects will use similar components for evaluation. You can try to write this simple and practical component by yourself. I use jq here. If you want to use js, you can directly replace it with js api. The logic is the same.

First of all, we need to consider what needs to be used when encapsulating: container, display data, whether it is read-only, whether it needs to display label, whether it needs to display evaluation value, and default value.

Then you can write code:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义简易评价组件</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="evaluateBox" id="evaluate"></div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    let evaluateEle = $("#evaluate")//获取容器
    let evaluateData = [{
    
    //自定义数据
        title: "差",
        key: 1
    }, {
    
    
        title: "一般",
        key: 2
    }, {
    
    
        title: "好",
        key: 3
    }]
    let title = "服务评价"
    let defaultValue = null
    // 执行渲染函数
    urbaneBinEvaluateModule(evaluateEle, evaluateData, false, title, true, defaultValue)


    /**
 * 
 * @param {渲染容器对象} ele 
 * @param {*数据} data 
 * @param {是否不可修改*} immutable 
 * @param {*显示label} title 
 * @param {*是否显示内容title} contentTitle 
 * @param {*默认值} defaultValue 
 */

    //评分组件
    function urbaneBinEvaluateModule(ele, data = [], immutable = false, title, contentTitle, defaultValue = null) {
    
    
        if (ele) {
    
    
            let depth = `
            <div class="evaluate">
                <label for="evaluateContent" class = "evaluateTitle">${
      
      title}</label>
                <ul id="evaluateContent" class = "evaluateContent"></ul>
                <span class = "evaluateContentTitle"></span>
            </div>
        `
            ele.html(depth)
            //首次渲染
            evaluateApply(defaultValue)
            // 渲染
            function evaluateApply(key = false, titleStatus = true) {
    
    
                let evaluateContent = ""
                let record = 0
                let titleName = ""
                if (!key) {
    
    
                    record++
                }
                data.forEach(item => {
    
    
                    let unity = `<li class = "evaluateUnity ${
      
      record === 0 ? "bright" : "ash"}" data-key=${
      
      item.key}></li>`
                    evaluateContent += unity
                    if (item.key == key) {
    
    
                        titleName = item.title
                        window.top.serviceEvaluation = key//获取到评价的值
                        record++
                    }
                })
                $("#evaluateContent").html(evaluateContent)
                //判断是否显示文字
                if (contentTitle && titleStatus) {
    
    
                    $(".evaluateContentTitle").text(titleName)
                }
                record = 0
                //判断是否可以编辑
                if (!immutable) {
    
    
                    evaluateEvent()
                }

            }
            //添加事件
            function evaluateEvent() {
    
    
                $(".evaluateUnity").on("click", function (ele) {
    
    
                    let key = ele.target.attributes["data-key"].value
                    evaluateApply(key)
                })
            }

        } else {
    
    
            Error(ele)
        }
    }

</script>

</html>

CSS:

.evaluateBox {
    
    
    width: 500px;
    height: 50px;
}

.evaluate {
    
    
    display: flex;
    width: 100%;
    height: 37px;
}

.evaluateTitle {
    
    
    display: inline-block;
    height: 38px;
    line-height: 38px;
    width: 130px;
    text-align: right;
    color: #333;
    margin-right: 15px;
}

.evaluateContent {
    
    
    display: inline-block;
    height: 38px;
    margin: 0px;
    padding: 0px;
}

.evaluateUnity {
    
    
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
}


.evaluateContentTitle {
    
    
    display: inline-block;
    height: 38px;
    line-height: 33px;
    color: #333;
}

.ash {
    
    
    background-image: url(../img/星星灰.svg);
    /*千万记得引入正确的图片地址*/

}

.bright {
    
    
    background-image: url(../img/星星亮.svg);
    /*千万记得引入正确的图片地址*/
}

You can use it by copying and pasting. You can download two images of suitable size from the Internet and import them. Here, we suggest that Ali’s icon library has more choices: iconfont-Alibaba Vector Icon Library $[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-jZvC6BwH-1666163315893) (C:\Users\24071\AppData\Roaming\Typora\typora-user-images\ image-20221019150352080.png)]$

You can adjust the css according to your needs.

If you find it useful, you can give it a thumbs up to support and encourage it. If you have any questions, please comment and discuss together.

Personal WeChat public account: urbaneBin, personal WeChat: urbaneBinA, welcome all friends to harass.