js/jq は単純な評価コンポーネントのカプセル化を実装します
レンダリング:
](https://img-blog.csdnimg.cn/e77ca23b3dee4f629a0f1507b2561bb4.png)
1. プロジェクトでは、評価に同様のコンポーネントを使用することがあります。このシンプルで実用的なコンポーネントを自分で書いてみることもできます。ここでは jq を使用します。js を使用したい場合は、直接 js API に置き換えることができます。ロジックは同じです。
まず、カプセル化する際にコンテナ、表示データ、読み取り専用かどうか、ラベル表示の要否、評価値の表示要否、デフォルト値などを考慮する必要があります。
次に、コードを書くことができます。
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);
/*千万记得引入正确的图片地址*/
}
コピー＆ペーストで使用できます。インターネットから適切なサイズの画像を 2 つダウンロードしてインポートできます。ここでは、Ali のアイコン ライブラリの選択肢が増えることをお勧めします: iconfont-Alibaba Vector Icon Library![[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-jZvC6BwH-1666163315893) (C:\Users\24071\AppData\Roaming\Typora\) typora-user-images\ image-20221019150352080.png)]](https://img-blog.csdnimg.cn/3c5fdccfefc9496a938d63f3627c4042.png)
必要に応じて CSS を調整できます。
役に立ったと思ったら、高評価を押してサポートや励ましをしてください。質問がある場合は、コメントして一緒に議論してください。
個人 WeChat 公開アカウント:urbaneBin、個人 WeChat:urbaneBinA、すべての友人への嫌がらせを歓迎します。