jquery - 当有多个要填充的元素时，代码不起作用

Question

该代码完美运行，但仅适用于一个元素，如下所示它是根据百分比填充的。

$(function () {
    $("div.percent").each(function(){
        var s = $("span.pct").text() + ' 100%';
        $(this).css({"background-size": s})
        console.log(s);
    });
});

.avg-percent {
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}

.flex {
    display: flex;
}
.relative {
    position: relative;
}
.very-satisfied {
    background-image: linear-gradient(to right, #57bb8a, #57bb8a);
}

.percent {
    width: 90%;
    background-size: 1% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.percent span:nth-of-type(1) {
    display: none;
}
span.avg-vote {
    flex: 1;
    padding-left: 1em;
    font-size: 0.8em;
    align-items: center;
    display: flex;
    vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="avg-percent div flex relative">
    <div class="percent very-satisfied">
        <span class="pct">70%</span>
        <span class="avg-vote">0</span>
    </div>
</div>

问题来了，当您要填充更多元素时，代码将停止工作。

$(function () {
    $("div.percent").each(function(){
        var s = $("span.pct").text() + ' 100%';
        $(this).css({"background-size": s})
        console.log(s);
    });
});

.avg-percent {
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}

.flex {
    display: flex;
}
.relative {
    position: relative;
}
.very-satisfied {
    background-image: linear-gradient(to right, #57bb8a, #57bb8a);
}

.percent {
    width: 90%;
    background-size: 1% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.percent span:nth-of-type(1) {
    display: none;
}
span.avg-vote {
    flex: 1;
    padding-left: 1em;
    font-size: 0.8em;
    align-items: center;
    display: flex;
    vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="avg-percent div flex relative">
    <div class="percent very-satisfied">
        <span class="pct">60%</span>
        <span class="avg-vote">0</span>
    </div>
</div>
<div class="avg-percent div flex relative">
    <div class="percent very-satisfied">
        <span class="pct">40%</span>
        <span class="avg-vote">0</span>
    </div>
</div>

在仅评估单个元素的第一个示例中，在控制台中它向我们展示了这一点70% 100%，但是当我想在控制台中使用 multipli 时，它向我展示了这一点60%40% 100% 60%40% 100%

那么如何让代码适用于多个背景填充？

标签： jquerycss

Answer 1

您需要针对span.pct目标元素中的特定内容。

$(function () {
    $("div.percent").each(function(){
        var s = $(this).find("span.pct").text() + ' 100%'; // Change this line
        $(this).css({"background-size": s})
        console.log(s);
    });
});

.avg-percent {
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}

.flex {
    display: flex;
}
.relative {
    position: relative;
}
.very-satisfied {
    background-image: linear-gradient(to right, #57bb8a, #57bb8a);
}

.percent {
    width: 90%;
    background-size: 1% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.percent span:nth-of-type(1) {
    display: none;
}
span.avg-vote {
    flex: 1;
    padding-left: 1em;
    font-size: 0.8em;
    align-items: center;
    display: flex;
    vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="avg-percent div flex relative">
    <div class="percent very-satisfied">
        <span class="pct">60%</span>
        <span class="avg-vote">0</span>
    </div>
</div>
<div class="avg-percent div flex relative">
    <div class="percent very-satisfied">
        <span class="pct">40%</span>
        <span class="avg-vote">0</span>
    </div>
</div>