這兩個操作不能同時執行

我試圖通過使用數據屬性，使進度條，但在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') + '%'); 
});

結果是：

enter image description here

但它應該是：

enter image description here

來源

2016-06-20 Liimd

是什麼問題呢？看到https://jsfiddle.net/usyL2vcw/ – Mohammad

我看到我錯過了第二次這個Jquery之前的「$」，但問題是隻有文本出現......我需要文本和progressvalue的背景出現。 – Liimd

嘗試在設置文本後檢查DOM，看起來像正在移除彩色元素。 – Douglas

你有兩個問題秒。這是一個可行的解決方案。 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') + '%'); 
});

來源

2016-06-20 20:35:48 Jack

謝謝你。現在正在工作。 – Liimd

這兩個操作不能同時執行

回答

相關問題