CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liimd
Liimd

Reputation: 35

Both actions cannot be performed simultaneously

I'm trying to make a progress bar by using data-atribute, but in Jquery both actions cannot be performed simultaneously.

<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') + '%');
});

The result is:

enter image description here

But it should be:

enter image description here

Upvotes: 3

Views: 67

Answers (1)

Jack
Jack

Reputation: 8941

You have two issues. Here's a working solution. https://jsfiddle.net/usyL2vcw/1/

Your first issue is that you are using this instead of $this. Your second issue is that you can't change the text of a div that has children (You can but it replaces the children). Use a sibling span instead.

<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') + '%');
});

Upvotes: 3

Related Questions