我制作了几个带有数据行属性的div。我想循环每个 div 并从数据行属性中获取自己的值并以 % 的形式应用于宽度,但它只获取最后一个值并将其全部应用。
你可以在这里查看我的代码。
(function processLine() {
var processBar = $('.process');
var percent = $('.process-percent .percentage');
//var id = setInterval(frame, 15);
function frame() {
var arrData = [];
processBar.each(function() {
var processData = $(this).data('line');
if (arrData.indexOf(processData) !== processData) {
arrData.push(processData);
}
});
for (var i = 0; i < arrData.length; i++) {
processBar.css({
'width': arrData[i] + '%'
});
}
}
frame();
})();
.process-bar {
position: relative;
max-width: 265px;
height: 15px;
background-color: #e4e4e4;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#sidebar-left .process-bar {
width: 265px;
}
.process {
position: relative;
width: 70%;
height: 15px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #aab3c3;
}
.process-percent {
display: block;
text-align: right;
font-size: 9px;
color: #f9f9f9;
padding-right: 5%;
font-weight: 400;
}
.yaris-arrow-progress .process-bar-container {
margin-bottom: 16px;
}
.yaris-arrow-progress .process-bar-container:last-child {
margin-bottom: 0;
}
.yaris-arrow-progress .process-bar {
max-width: 90%;
width: 90%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
display: flex;
align-items: center;
}
.yaris-arrow-progress .process-bar::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-left: 18px solid #e4e4e4;
border-bottom: 9px solid transparent;
top: 0;
left: 100%;
}
.yaris-arrow-progress .process-bar::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 10px solid #f9f9f9;
border-left: 20px solid transparent;
border-right: 120px solid #f9f9f9;
border-top: 10px solid #f9f9f9;
z-index: 2;
}
.yaris-arrow-progress .process {
width: 70%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #f8981d;
}
.yaris-arrow-progress .process .bike {
display: block;
text-align: right;
font-size: 16px;
color: #f9f9f9;
padding-right: 2%;
line-height: 0;
}
.yaris-arrow-progress .process::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #f8981d;
border-bottom: 10px solid transparent;
top: 0;
left: 100%;
z-index: 1;
}
.yaris-arrow-progress .lap-xp {
position: absolute;
z-index: 3;
font-size: 10px;
margin-left: 40px;
}
<div class="yaris-arrow-progress">
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="10">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="65">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="83">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar">
<div class="process" data-line="95">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
最佳答案
您正在 for
循环内使用 processBar
来更新 CSS 宽度。由于 processBar
是所有 .process
元素的集合,因此当您对其调用 .css
时,所有元素都会发生更改。尝试使用.eq(i)
仅更改该集合的i-th
索引处的元素。
加上我不明白你为什么要使用两个循环。您可以直接在 each
内部应用 CSS(您可以在其中使用 $(this)
来定位当前元素:
function frame() {
processBar.each(function() {
var processData = $(this).data('line');
$(this).css({
// ^^^^ instead of processBar which changes the whole collection
'width': processData + '%'
});
});
}
(function processLine() {
var processBar = $('.process');
var percent = $('.process-percent .percentage');
function frame() {
processBar.each(function() {
var processData = $(this).data('line');
$(this).css({
'width': processData + '%'
});
});
}
frame();
})();
.process-bar {
position: relative;
max-width: 265px;
height: 15px;
background-color: #e4e4e4;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#sidebar-left .process-bar {
width: 265px;
}
.process {
position: relative;
width: 70%;
height: 15px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #aab3c3;
}
.process-percent {
display: block;
text-align: right;
font-size: 9px;
color: #f9f9f9;
padding-right: 5%;
font-weight: 400;
}
.yaris-arrow-progress .process-bar-container {
margin-bottom: 16px;
}
.yaris-arrow-progress .process-bar-container:last-child {
margin-bottom: 0;
}
.yaris-arrow-progress .process-bar {
max-width: 90%;
width: 90%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
display: flex;
align-items: center;
}
.yaris-arrow-progress .process-bar::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-left: 18px solid #e4e4e4;
border-bottom: 9px solid transparent;
top: 0;
left: 100%;
}
.yaris-arrow-progress .process-bar::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 10px solid #f9f9f9;
border-left: 20px solid transparent;
border-right: 120px solid #f9f9f9;
border-top: 10px solid #f9f9f9;
z-index: 2;
}
.yaris-arrow-progress .process {
width: 70%;
height: 20px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #f8981d;
}
.yaris-arrow-progress .process .bike {
display: block;
text-align: right;
font-size: 16px;
color: #f9f9f9;
padding-right: 2%;
line-height: 0;
}
.yaris-arrow-progress .process::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #f8981d;
border-bottom: 10px solid transparent;
top: 0;
left: 100%;
z-index: 1;
}
.yaris-arrow-progress .lap-xp {
position: absolute;
z-index: 3;
font-size: 10px;
margin-left: 40px;
}
<div class="yaris-arrow-progress">
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="10">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="65">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar ">
<div class="process" data-line="83">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
<div class="process-bar-container">
<div class="process-bar-wrapper">
<div class="process-bar">
<div class="process" data-line="95">
<div class="bike"><span class="lnr lnr-bicycle"></span></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
关于javascript - 循环应用最后一个值的 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45108125/