Question

我使用jquery为progressbar编写了一个代码，它按预期工作，但是如果我添加第二个元素，所有元素的工作方式都相同，这就是为什么我想我必须使它动态但我不知道如何才能使它成为动态的？

HTML

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <div class="trustyou-progressbar pull-right">
            <p class="trustyou-puan">100/72 Puan</p>
            <div class="progressFill">
                <span class="ani-puan" ani-puan="72"></span>
            </div>
        </div>


        <div class="trustyou-progressbar pull-right">
            <p class="trustyou-puan">100/39 Puan</p>
            <div class="progressFill">
                <span class="ani-puan" ani-puan="39"></span>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </body>
</html>

CSS

.trustyou-progressbar{
  width:100px;
}
.trustyou-puan{
    font-size: 13px;
    color:#494949;
    font-weight: 500;
}
.progressFill{
    width:100%;
    height:6px;
    background:#222222;
}
.ani-puan{
    display:block;
    height:100%;
}

JQUERY

 var getprogressPuan = $('.ani-puan').attr('ani-puan');
  $(".ani-puan").css("width",getprogressPuan+"%");
  if((getprogressPuan>0) && (getprogressPuan<=40)){
      $(".ani-puan").css("background","#ca2424");
  }else if((getprogressPuan>=40) && (getprogressPuan<75)){
      $(".ani-puan").css("background","#d6d824");
  }else if((getprogressPuan>=75)){
      $(".ani-puan").css("background","#9ad204");
  }

click to see demo

Answer 1

使用迭代器将函数应用于所有元素：

$('.ani-puan').each(function() {

  var getprogressPuan = $(this).attr('ani-puan');
  $(this).css("width", getprogressPuan + "%");
  if ((getprogressPuan > 0) && (getprogressPuan <= 40)) {
    $(this).css("background", "#ca2424");
  } else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) {
    $(this).css("background", "#d6d824");
  } else if ((getprogressPuan >= 75)) {
    $(this).css("background", "#9ad204");
  }

});

Here is the sample page

Answer 2

这是codepen链接：http://codepen.io/kofijita/pen/WGyzQY

$（“。ani-puan”）将获得两个元素，你应该使用迭代器来区分它们。

var $puan = $('.ani-puan');
for (var i = 0, len = $puan.length; i < len; i++) {
    var $cur = $('.ani-puan').eq(i);
    var getprogressPuan = $cur.attr('ani-puan');
    $cur.css("width", getprogressPuan + "%");
    if ((getprogressPuan > 0) && (getprogressPuan <= 40)) {
        $cur.css("background", "#ca2424");
    } else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) {
        $cur.css("background", "#d6d824");
    } else if ((getprogressPuan >= 75)) {
        $cur.css("background", "#9ad204");
    }
}

Answer 3

此代码只是使用ani-puan类更改所有元素。

您需要创建一个jQuery组件（小部件）以分别处理每个进度条。

首先阅读How to Create a Basic Plugin，然后您可以学习jQuery UI's progressbar source code，了解他们是如何做到的。

如果您不介意，可以download the jQuery UI progressbar（您不需要整个jQuery UI）只需更改您需要的内容。

另请注意，HTML5已经包含已经满足您需要的组件progress（包括更改颜色）。

Answer 4

您也可以像这样轻松创建进度条：

var i = 0;
var clear = setInterval(function(){
  i++;
  $('.progressFill').text(i+'0%');
  $('.progressFill').width(i+'0%');
  if(i==10)
  {
      clearInterval(clear);
  }
},1000);

.trustyou-progressbar{
 width: 100px;
 background-color: #000000;
}
.trustyou-puan{
    font-size: 13px;
    color:#494949;
    font-weight: 500;
}
.progressFill{
    width: 0%;
  height: 6px;
  background: #15D318;
}
.ani-puan{
    display:block;
    height:100%;
}

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<div class="trustyou-progressbar pull-right">
			<div class="progressFill">
				<span class="ani-puan" ani-puan="72"></span>
			</div>
		</div>
   
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</body>
</html>

如何使用jquery创建动态进度条？

4 个答案: