Question

我正在尝试创建进度条列表。

值将在15到30之间。

这个想法是15是50％，而30是100％。我遇到的麻烦是使用jquery根据data属性中提供的值将每个元素/进度条的宽度设置为正确的宽度百分比。

如果该值为15，则条形宽度应为50％。如果有效值是30，则条形宽度应为100％。

我无法弄清楚要实现这一目标的计算是什么？

我没有任何jQuery可以显示，因为我没有取得任何成功，所以恐怕这只是胡说八道。

我的HTML如下：

.Progress {
  width: 100%;
  background-color: #ddd;
  height: 30px;
  margin-bottom: 10px;
}

.Bar {
  width: 45%;
  height: 30px;
  background-color: #4CAF50;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 30px;
  color: white;
  display: block;
}

.name {
  float: left;
}

.pct {
  float: right;
}

<div class="Progress">
  <div class="Bar" data-value="15">
    <div class="name">NAME</div>
    <div class="pct">15%</div>
  </div>
</div>

<div class="Progress">
  <div class="Bar" data-value="20">
    <div class="name">NAME</div>
    <div class="pct">20%</div>
  </div>
</div>

<div class="Progress">
  <div class="Bar" data-value="25">
    <div class="name">NAME</div>
    <div class="pct">25%</div>
  </div>
</div>

<div class="Progress">
  <div class="Bar" data-value="30">
    <div class="name">NAME</div>
    <div class="pct">30%</div>
  </div>
</div>

我意识到我最终需要实现略有不同的结果。

我的目标是设定最小值和最大值。如果该值<=最小值，则进度条的宽度将设置为50％，如果该值> =最大值，则将其设置为100％，然后自动在这些值之间进行计算。

使用以下2个功能，我能够实现这一目标

function range(start, end, step = 1) {
  const len = Math.floor((end - start) / step) + 1
  return Array(len).fill().map((_, idx) => start + (idx * step))
}
function trust15width(value) {
	var lowEnd = 15; // This is the minimum value to be calculated
	var highEnd = 18; // this is the maximum value to be calculated
	
	if(value > highEnd) {
    // if the value is bigger than the maximum value, force the percentage to be 100
		var newWidth = 100;
	} else if(value < lowEnd) {
  // if the value is smaller than the minimum value, force the percentage to be 50
		var newWidth = 50;
	} else {
  
		var result = range(lowEnd, highEnd, 0.1); // Change these variables for the start and end of the range. 
		var increments = result.length;
		var percentageIncrease = 50 / result.length;
		var position = result.indexOf(value)+1; // change this number according to the market share
		var newWidth = 50 + (position * percentageIncrease);
		
	}
	return newWidth;
    }

 console.log(trust15width(14.7));

Answer 1

使用Bar上的JQuery .each()并通过获取data-value并执行一些简单的数学百分比来设置CSS width属性就可以了

$( ".Bar" ).each(function() {
  let percent = $(this).attr('data-value');
  percent = percent * 100 / 30;
  
  //For too high values :
  if(percent > 100){
    percent = 100;
  }
  
  //$(this).css('width', percent+'%' );
  
  //With animation as asked :
    $(this).animate({width: percent+'%' }, 2000);
});

.Progress {
  width: 100%;
  background-color: #ddd;
  height:30px;
  margin-bottom:10px;
}

.Bar {
  width: 45%;
  height: 30px;
  background-color: #4CAF50;
  padding-left:10px;
  padding-right:10px;
  line-height: 30px;
  color: white;
  display:block;
}
.name {
float:left;
}
.pct {
float:right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Progress">
  <div class="Bar" data-value="15"><div class="name">NAME</div><div class="pct">15%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="20"><div class="name">NAME</div><div class="pct">20%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="25"><div class="name">NAME</div><div class="pct">25%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="30"><div class="name">NAME</div><div class="pct">30%</div></div>
</div>

Answer 2

我根据data-value

设置宽度

let bar = document.querySelectorAll(".Bar");

let biggest_value = 0;

bar.forEach(function(par){
  
  if(Number(par.getAttribute("data-value")) > biggest_value){
    biggest_value = Number(par.getAttribute("data-value"));
  }
});

let rate = 100 / biggest_value;

bar.forEach(function(par){
  par.style.width = (par.getAttribute("data-value")*rate) + "%";
});

* {
  box-sizing:border-box;
}

.Progress {
  width: 100%;
  background-color: #ddd;
  height:30px;
  margin-bottom:10px;
}

.Bar {
  width: 45%;
  height: 30px;
  background-color: #4CAF50;
  padding-left:10px;
  padding-right:10px;
  line-height: 30px;
  color: white;
  display:block;
}
.name {
float:left;
}
.pct {
float:right;
}

<div class="Progress">
  <div class="Bar" data-value="15"><div class="name">NAME</div><div class="pct">15%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="20"><div class="name">NAME</div><div class="pct">20%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="25"><div class="name">NAME</div><div class="pct">25%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="30"><div class="name">NAME</div><div class="pct">30%</div></div>
</div>

Answer 3

这是您需要的jQuery代码：D

编辑：哦，不，我好像要放慢速度：（

edit2：好的，现在是动态的和正确的数字

$( document ).ready(function() {
    var max = 0;
    $('.Bar').each(function(i, obj) {
      if ($(this).data("value") > max){
        max = $(this).data("value");
      }
    });
    
    $('.Bar').each(function(i, obj) {
      $(this).css("width", (100/max)*$(this).data("value")+"%");
      $(this).find(".pct").html(Math.round((100/max)*$(this).data("value"))+"%");
    });
});

.Progress {
  width: 100%;
  background-color: #ddd;
  height:30px;
  margin-bottom:10px;
}

.Bar {
  width: 45%;
  height: 30px;
  background-color: #4CAF50;
  padding-left:10px;
  padding-right:10px;
  line-height: 30px;
  color: white;
  display:block;
}
.name {
float:left;
}
.pct {
float:right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Progress">
  <div class="Bar" data-value="15"><div class="name">NAME</div><div class="pct">15%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="20"><div class="name">NAME</div><div class="pct">20%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="25"><div class="name">NAME</div><div class="pct">25%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="30"><div class="name">NAME</div><div class="pct">30%</div></div>
</div>

Answer 4

您需要将30除以.Bar的值，然后再将其乘以100。设置框-sizing:border-box

/*$('.Progress').each(function(){
  let value = $(this).find('.Bar').css('width', '30')
  console.log(value);
  let parentWidth = getComputedStyle(this).width;
  
})*/
let total = 30;
$('.Bar').each(function(){
  let value = (parseInt($(this).data().value)/total) * 100;
  $(this).css('width',value + '%')
})

.Progress {
  width: 100%;
  background-color: #ddd;
  height:30px;
  margin-bottom:10px;
}

.Bar {
  box-sizing:border-box;
  height: 30px;
  background-color: #4CAF50;
  padding-left:10px;
  padding-right:10px;
  line-height: 30px;
  color: white;
  display:block;
}
.name {
float:left;
}
.pct {
float:right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Progress">
  <div class="Bar" data-value="15"><div class="name">NAME</div><div class="pct">15%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="20"><div class="name">NAME</div><div class="pct">20%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="25"><div class="name">NAME</div><div class="pct">25%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="30"><div class="name">NAME</div><div class="pct">30%</div></div>
</div>

Answer 5

这是带有相应数学的完全证明解决方案-

显示栏上的 百分比
动态设置最大值，在您的情况下为30
处理了两个最坏的情况-
1. 对于data-value < 1，显示0%
2. 对于data-value > Max，显示100%

function findPercentagePer30(x, max) {
    return ((x / max) * 100).toFixed(2).replace(/[.,]00$/, "");
}

$(function() {
    $('.Bar').each(function() {
      var dataVal = $(this).attr("data-value");
      var percentage = findPercentagePer30(dataVal, 30);    // max = 30 here
      if(percentage > 0) {
        percentage = percentage <= 100 ? percentage : 100;
      	$(this).css("width", percentage + '%');
      	$(this).find(".pct:first").text(percentage + '%');
      } else {
      	$(this).css("background-color", 'transparent');
        $(this).find(".pct:first").text('0%');
      }
    });
});

.Progress {
  width: 100%;
  background-color: #ddd;
  height: 30px;
  margin-bottom: 10px;
}

.Bar {
  width: 45%;
  height: 30px;
  background-color: #4CAF50;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 30px;
  color: white;
  display: block;
  box-sizing: border-box;    /* <-- added this */
}

.name {
  float: left;
}

.pct {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Progress">
  <div class="Bar" data-value="15"><div class="name">NAME</div><div class="pct">15%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="20"><div class="name">NAME</div><div class="pct">20%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="25"><div class="name">NAME</div><div class="pct">25%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="30"><div class="name">NAME</div><div class="pct">30%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="0"><div class="name">WORST CASE (data-value &lt; 1)</div><div class="pct">0%</div></div>
</div>

<div class="Progress">
  <div class="Bar" data-value="35"><div class="name">WORST CASE (data-value &gt; Max)</div><div class="pct">35%</div></div>
</div>

注意： 请记住将box-sizing: border-box;添加到.Bar中，以使所有条形看起来统一。

使用jquery自定义进度栏将值转换为百分比

5 个答案: