Objective
- 我正在尝试设置一系列div 的样式
.table__color宽度 的div 等于.table__pct元素数组中的数据属性的值。 - 因此，如果数据属性的值为 59，则div
.table__color的宽度为 59%，呈现水平条形图的外观。
问题
- 现在，所有
.table__color条的宽度都相同，因为我只能获取数组中的最后一项，因此所有div 的宽度为 59%
脚本.js
// Target all the elements with a class of `table__pct` that contain a data-attribute. The value of the data-attribute will be used to later determine the width of the `.table__color` bar
var bar = $(".table__pct");
// Use .map to create a new array that is just the data-attribute
var barWidthData = $('.table__pct').map(function () {
return $(this).attr("data-attribute");
});
// Loop over the array and style the width of `.table__color` based on the value of the data-attribute from the array
for (var i=0; i < barWidthData.length; i++){
$(".table__color").css("width", barWidthData[i] + "%");
}
索引.html
<div class="table">
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company operates by strong values and ethics</p>
<p class="table__pct" data-attribute="85.1">85.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My manager cares about my concerns</p>
<p class="table__pct" data-attribute="82.4">82.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My manager makes it easier to do my job well</p>
<p class="table__pct" data-attribute="81.9">81.9%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My job makes me feel like I am part of something meaningful
<p class="table__pct" data-attribute="81.4">81.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I feel genuinely appreciated at this company</p>
<p class="table__pct" data-attribute="81.4">81.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I have confidence in the leader of this company</p>
<p class="table__pct" data-attribute="80.7">80.7%</p>
</div>
<div class="table__color"></div>
</div>
<!-- Check this -->
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I have the flexibility I need to balance my work personal life</p>
<p class="table__pct" data-attribute="80.6">80.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company motivates me to give my very best at work</p>
<p class="table__pct" data-attribute="80.4">80.4%</p>
</div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I would highly recommend working at this company to others</p>>
<p class="table__pct" data-attribute="79.8">79.8%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">New ideas are encouraged at this company</p>
<p class="table__pct" data-attribute="78.4">78.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I believe this company is going in the right direction</p>
<p class="table__pct" data-attribute="78.2">78.2%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My manager helps me learn and grow</p>
<p class="table__pct" data-attribute="78.1">78.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company enables me to work at my full potential</p>
<p class="table__pct" data-attribute="76.2">76.2%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company encourages different points of view</p>
<p class="table__pct" data-attribute="74.1">74.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This job has met or exceeded the expectations I had when started</p>
<p class="table__pct" data-attribute="73.6">73.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">At this company, we do things efficiently and well</p>
<p class="table__pct" data-attribute="70.9">70.9%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I get the formal training I want for my career</p>
<p class="table__pct" data-attribute="69">69.0%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">There is good inter-departmental cooperation at this company</p>
<p class="table__pct" data-attribute="68.1">68.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I feel well-informed about important decisions this company</p>
<p class="table__pct" data-attribute="66.6">66.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">Senior managers understand what is really happening at the company</p>
<p class="table__pct" data-attribute="66.4">66.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My benefits package is good compared to others in the industry</p>
<p class="table__pct" data-attribute="64.9">64.9%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My pay is fair for the work I do</p>
<p class="table__pct" data-attribute="63.8">63.8%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I have not considered searching for a better job in the past month</p>
<p class="table__pct" data-attribute="62.6">62.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">There is not a lot of negativity at my workplace</p>
<p class="table__pct" data-attribute="59">59.0%</p>
</div>
<div class="table__color"></div>
</div>
</div>
风格.css
.table__row {
border-bottom: 1px solid black;
font-family: "Open Sans";
font-size: 16px;
}
.table__row {
position: relative;
}
.table__row--inner {
padding-left: 16px;
padding-right: 16px;
height: 100%;
display: flex;
justify-content: space-between;
margin: 0;
}
.table__color {
background: #FFCB50;
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
.table__statement {
font-weight: 700;
}
您可以遍历所有div，并为每个div 添加宽度，下面是一个示例：
$(".table__color").each(function(index) {
$(this).css("width", barWidthData[index] + "%");
});
但是一种更聪明、更漂亮的方法，只使用.css()方法，正如@Andreas评论的那样：
$(".table__color").css("width", function(idx) {
return barWidthData[idx] + "%";
});
// Target all the elements with a class of `table__pct` that contain a data-attribute. The value of the data-attribute will be used to later determine the width of the `.table__color` bar
var bar = $(".table__pct");
// Use .map to create a new array that is just the data-attribute
var barWidthData = $('.table__pct').map(function() {
return $(this).attr("data-attribute");
});
// Loop over the array and style the width of `.table__color` based on the value of the data-attribute from the array
/*for (var i=0; i < barWidthData.length; i++){
$(".table__color").css("width", barWidthData[i] + "%");
}*/
/*$(".table__color").each(function(index) {
$(this).css("width", barWidthData[index] + "%");
});*/
$(".table__color").css("width", function(idx) {
return barWidthData[idx] + "%";
});.table__row {
border-bottom: 1px solid black;
font-family: "Open Sans";
font-size: 16px;
}
.table__row {
position: relative;
}
.table__row--inner {
padding-left: 16px;
padding-right: 16px;
height: 100%;
display: flex;
justify-content: space-between;
margin: 0;
}
.table__color {
background: #FFCB50;
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
.table__statement {
font-weight: 700;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company operates by strong values and ethics</p>
<p class="table__pct" data-attribute="85.1">85.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My manager cares about my concerns</p>
<p class="table__pct" data-attribute="82.4">82.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My manager makes it easier to do my job well</p>
<p class="table__pct" data-attribute="81.9">81.9%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My job makes me feel like I am part of something meaningful
<p class="table__pct" data-attribute="81.4">81.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I feel genuinely appreciated at this company</p>
<p class="table__pct" data-attribute="81.4">81.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I have confidence in the leader of this company</p>
<p class="table__pct" data-attribute="80.7">80.7%</p>
</div>
<div class="table__color"></div>
</div>
<!-- Check this -->
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I have the flexibility I need to balance my work personal life</p>
<p class="table__pct" data-attribute="80.6">80.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company motivates me to give my very best at work</p>
<p class="table__pct" data-attribute="80.4">80.4%</p>
</div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I would highly recommend working at this company to others</p>>
<p class="table__pct" data-attribute="79.8">79.8%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">New ideas are encouraged at this company</p>
<p class="table__pct" data-attribute="78.4">78.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I believe this company is going in the right direction</p>
<p class="table__pct" data-attribute="78.2">78.2%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My manager helps me learn and grow</p>
<p class="table__pct" data-attribute="78.1">78.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company enables me to work at my full potential</p>
<p class="table__pct" data-attribute="76.2">76.2%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This company encourages different points of view</p>
<p class="table__pct" data-attribute="74.1">74.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">This job has met or exceeded the expectations I had when started</p>
<p class="table__pct" data-attribute="73.6">73.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">At this company, we do things efficiently and well</p>
<p class="table__pct" data-attribute="70.9">70.9%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I get the formal training I want for my career</p>
<p class="table__pct" data-attribute="69">69.0%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">There is good inter-departmental cooperation at this company</p>
<p class="table__pct" data-attribute="68.1">68.1%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I feel well-informed about important decisions this company</p>
<p class="table__pct" data-attribute="66.6">66.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">Senior managers understand what is really happening at the company</p>
<p class="table__pct" data-attribute="66.4">66.4%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My benefits package is good compared to others in the industry</p>
<p class="table__pct" data-attribute="64.9">64.9%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">My pay is fair for the work I do</p>
<p class="table__pct" data-attribute="63.8">63.8%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">I have not considered searching for a better job in the past month</p>
<p class="table__pct" data-attribute="62.6">62.6%</p>
</div>
<div class="table__color"></div>
</div>
<div class="table__row">
<div class="table__row--inner">
<p class="table__statement">There is not a lot of negativity at my workplace</p>
<p class="table__pct" data-attribute="59">59.0%</p>
</div>
<div class="table__color"></div>
</div>
</div>