javascript - 两个 Action 不能同时进行

Question

我正在尝试使用数据属性制作进度条，但在 Jquery 中，这两个操作不能同时执行。

<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;
}

$('.progressvalue').each(function() {
    var $this = $(this);
    $this.css('width', $this.data('percent') + '%');
    $this.parent().text('tournament progress: ' + $this.data('percent') + '%');
});

结果是:

但应该是:

Answer 1

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

您的第一个问题是您使用的是 this 而不是 $this。您的第二个问题是您不能更改具有子项的 div 的 text(您可以，但它会替换子项)。请改用兄弟跨度。

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

---

$('.progressvalue').each(function() {
    var $this = $(this);
    $this.css('width', $this.data('percent') + '%');
    $this.siblings().text('tournament progress: ' + $this.data('percent') + '%');
});