How to change animated status bar value with same class but different part

Tags: , ,



I do need for these status bars to work for each own. Maybe also the buttons could worked. I tried to acquire the value of “data-bar” without succeed (the script does still can process the “data-max”). And seems that the script does apply to all bars, not individually, while I need that it differs for each bar.


In html:

<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>

In script:

<script>
/* Requiring jQuery.js */
$(document).ready( function(){

/* Print the bar elements at the screen */
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" + 
"<div class='stat-bar-main-shade-plus'></div>" + 
"<div class='stat-bar-main'></div>" + 
"<div class='stat-bar-text'></div>"
);

/* Animating a changed variable  */
setInterval(function(){ // 2 second interval change

/* Get attr value from the stat bar */
var bar = $(".stat-bar");
if (bar){ // bar
var maxStat = bar.attr("data-bar-max");

/* Probably working area (remove "//" from a case and add it to all other case) */
/* Case A (testing): randomized attr value for "[data-bar]" (it works) */
// var currentStat = Math.floor((Math.random() * 100) + 50);
/* Case B (testing):: manual attr value for test (it works) */
var currentStat = 41;
/* Case C (what is demanded): getting attr value from "[data-bar]" (doesn’t works) */
// var currentStat = bar.attr("data-bar");

/* END Probably working area */

if (currentStat > maxStat){currentStat = maxStat;
} else if (currentStat < 0){currentStat = 0;
} else {currentStat = currentStat;}
} // END bar

var a = currentStat * (100 / maxStat);
$(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " &nbsp;" + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
setTimeout(function(){
$(".stat-bar-main-shade-min").animate({"width": a + "%"}, 800);
$(".stat-bar-main-shade-plus").animate({"width": a + "%"}, 300);
$(".stat-bar-main").animate({"width": a + "%"}, 700);
}, 400);

}, 2000); // END 2 second interval change



});
</script>

In css:

<style>
.stat-bar{
background-color: #ACB597;
height: 26px;width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main{
background-color: #464D51;
height: 30px;width: inherit;
bottom: 50px;
position: relative;
}

.stat-bar-main-shade-min{height: 100%;width: 100%;}
.stat-bar-main-shade-plus{
height: 100%;width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min, .stat-bar-main-shade-plus{
background: linear-gradient(90deg, rgba(70,77,81,1) 95%, rgba(70,77,81,0) 100%);
opacity: 0.35;
}

.stat-bar-text{
color: rgba(255,255,255,0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
</style>

Answer

You can use each loop to iterate through your divs and get required values i.e : attributes then use $(this).find("someclass") to get reference of divs where you need to change widths and texts.

Demo Code :

$(document).ready(function() {
  $(".stat-bar").html(
    "<div class='stat-bar-main-shade-min'></div>" +
    "<div class='stat-bar-main-shade-plus'></div>" +
    "<div class='stat-bar-main'></div>" +
    "<div class='stat-bar-text'></div>"
  );

  setInterval(function() {
    //loop through stat bar
    $(".stat-bar").each(function() {
      //get datas from divs
      var maxStat = parseInt($(this).attr("data-bar-max"));
      var currentStat = parseInt($(this).attr("data-bar"));
      //depend on value change currentstat
      currentStat > maxStat ? currentStat = maxStat : currentStat = currentStat;
      var a = currentStat * (100 / maxStat);
      //find statbartext inside div
      $(this).find(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " &nbsp;" + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");

      ///same find and apply effect there
      $(this).find(".stat-bar-main-shade-min").animate({
        "width": a + "%"
      }, 800);
      $(this).find(".stat-bar-main-shade-plus").animate({
        "width": a + "%"
      }, 300);
      $(this).find(".stat-bar-main").animate({
        "width": a + "%"
      }, 700);
    })
  }, 2000); // END 2 second interval change



});
.stat-bar {
  background-color: #ACB597;
  height: 26px;
  width: 60vw;
  margin: 0 auto;
  overflow: hidden;
  border: solid 1px #686E59;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px #888E79;
}

.stat-bar-main {
  background-color: #464D51;
  height: 30px;
  width: inherit;
  bottom: 50px;
  position: relative;
}

.stat-bar-main-shade-min {
  height: 100%;
  width: 100%;
}

.stat-bar-main-shade-plus {
  height: 100%;
  width: 100%;
  bottom: 24px;
  position: relative;
}

.stat-bar-main-shade-min,
.stat-bar-main-shade-plus {
  background: linear-gradient(90deg, rgba(70, 77, 81, 1) 95%, rgba(70, 77, 81, 0) 100%);
  opacity: 0.35;
}

.stat-bar-text {
  color: rgba(255, 255, 255, 0.8);
  font: 400 10px "opensans";
  letter-spacing: 0.09em;
  line-height: 24px;
  height: 24px;
  bottom: 78px;
  position: relative;
  box-shadow: inset 0 0 5px transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>


Source: stackoverflow