两个动作都不能同时执行

Question

我正在尝试使用data-atribute创建进度条，但在Jquery中，这两个操作都无法同时执行。

DistinctBy(m => (object) m.SomeUniqueMovieProperty ?? m)

<div class="progressbar">
    <div class="progressvalue" data-percent="50"></div>
</div>

.progressbar {
    background: #9696A0;
    height: 20px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    position: relative;
    z-index: 3;
}
.progressvalue {
    background: #4650C8;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    z-index: -1;
    border-radius: 10px;
}

结果是：

但它应该是：

Answer 1

你有两个问题。这是一个有效的解决方案。 https://jsfiddle.net/usyL2vcw/1/

您的第一个问题是您使用的是this而不是$this。 您的第二个问题是，您无法更改有孩子的text的{​​{1}}（您可以替换孩子）。改为使用兄弟跨度。

div

<div class="progressbar">
    <div class="progressvalue" data-percent="50"></div>
    <span></span>
</div>