我正在尝试将此图像重新创建为HTML / CSS / JS :(使用HTML5语义)
这是问我的问题:
这是我的实现。但是,我不确定如何动态获取/更新数字“ 30”,“ 19”等?我被困在那里,请帮忙。
.endorsements {
background: #f0f0f0;
border-left: 20px solid #49a9e1;
display: block;
margin: 10px;
}
.endorsements::after {
content: '+'
}
<article>
<section id="endo">
<button aria-label="css" class="endorsements"> CSS </button>
<button aria-label="web" class="endorsements"> Web Development </button>
<button aria-label="SEO" class="endorsements"> SEO </button>
<button aria-label="HTML" class="endorsements"> HTML </button>
</section>
</article>
有人可以帮助我重新创建此规范吗?我不确定使用:: after是个好主意吗?
答案 0 :(得分:0)
我将整个内容构建在for-loop
中,用“整个内容”表示每一行。
将值添加到data-attribute
,然后使用concent: attr(data-attribute)
显示数字。
如果您不是逐行创建HTML结构,请在从服务器获取数据后执行document.querySelectAll('.endorsement')
[编辑],循环响应并有选择地添加每个data-attribute
。 / p>
[edit]另外,将border-left: 20px solid #49a9e1
从.endorsement
中删除;
.endorsements {
background: #f0f0f0;
display: block;
margin: 10px;
}
.endorsements::before {
content: attr(data-number);
height: 20px;
width: 20px;
background-color: #4faadf;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
font-size: 0.9em;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
<!-- Example of how the DOM looks like after javascript have added the attribute 'data-number'. -->
<article>
<section id="endo">
<button data-number="30" aria-label="css" class="endorsements"> CSS </button>
<button data-number="19" aria-label="web" class="endorsements"> Web Development </button>
<button data-number="18" aria-label="SEO" class="endorsements"> SEO </button>
<button data-number="13" aria-label="HTML" class="endorsements"> HTML </button>
</section>
</article>
答案 1 :(得分:0)
因此,正如我在评论中所说,我建议使用类似对象的东西,可以将其循环生成您的html(实际上,如果您有经验,我建议使用Angular之类的东西-对于某些东西而言,它是很棒的像这样)。
还要注意,我不会为数字使用before::
伪元素,只需将其放在div中即可。见下文;
$(document).ready(function () {
let endorsements = {
0: {
name : "CSS",
count : 30,
endorsers:
[
"link/to/image.png",
"link/to/second/image.jpg"
]
},
1: {
name : "Web Development",
count : 16,
endorsers: [
"link/to/image.png",
"link/to/second/image.jpg"
],
}
};
let html = "";
let element = $("#endorsements");
for (let i in endorsements) {
html += `<div class="endorsement"><div class="count">${endorsements[i].count}</div><div class="name">${endorsements[i].name}</div></div>`
}
element.html(html);
})
.endorsement {
width : 100%;
background-color : #DDDDDD;
display : flex;
align-items : center;
}
.count {
width : 30px;
height : 30px;
background-color : #3498DB;
color : white;
text-align : center;
line-height : 30px;
display : block;
float : left;
margin-right : 10px;
}
.name::after {
content : "+";
color : #AAAAAA;
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="endorsements">
</div>