首頁(yè) 猿問(wèn) 求各位大神看看代碼jQuery代碼...

求各位大神看看代碼jQuery代碼哪里出錯(cuò)了，為什么兩個(gè)li #progress-bar中顯示的width百分比一樣

JQuery

qq_雨晴_2 2017-10-23 10:14:16

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無(wú)標(biāo)題文檔</title><style>ul{ list-style:none;}.table-body li{line-height:60px; height:60px; overflow:hidden; position:relative;}/*進(jìn)度條 */.barAll{position:absolute; top:18px; left:598px; color:#cbdbe6;}.barnum-1{width:870px;}.barnum-2{ width:1072px;}.progress{ position:relative; height:24px; background-color:#cbdbe6;? line-height:24px;}#progress-bar{line-height:24px;text-align:right; background-color:#ffb74d;-webkit-transition:all .3s; color:#eaeaea;}.progress-lbar{position:absolute; right:-64px; top:0; color:#acacac;}</style></head><body><ul class="table-body" id="tableBody"> <li>? ? ? ? <span class="numAll num">1</span>? ? <div class="barAll barnum-1">? ? ? ? ? ?<div class="progress">? ? ? ? ? ? ? ? <div id="progress-bar"><span class="progress-sbar" id="progress-sbar">485,931</span></div>? ? ? ? ? ? ? ? <span class="progress-lbar" id="progress-lbar">800000</span>? ? ? ? ? ? </div>? ? ? ?</div>? ? </li>? ? <li>? ? ? ? <span class="numAll num">2</span>? ? <div class="barAll barnum-2">? ? ? ? ? ?<div class="progress">? ? ? ? ? ? ? ? <div id="progress-bar"><span class="progress-sbar" id="progress-sbar">409,280</span></div>? ? ? ? ? ? ? ? <span class="progress-lbar" id="progress-lbar">2,400,000</span>? ? ? ? ? ? </div>? ? ? ?</div>? ? </li></ul><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script>$(function(){ var str1=$('#progress-sbar').text(), arr1= str1.split(","), strNew1=parseInt(arr1.join("")); var str2=$('#progress-lbar').text(), arr2= str2.split(","), strNew2=parseInt(arr2.join("")); var c = ((strNew1/strNew2)*100).toFixed(2)+'%'; $('li').each(function(index){ $('li #progress-bar').eq(index).css('width',c); }) })</script></body></html>

查看完整描述

1 回答

已采納

joffyzou

TA貢獻(xiàn)45條經(jīng)驗(yàn) 獲得超17個(gè)贊

首先，你的代碼太亂了，一個(gè)ID只能命名一次。

$('li').each(function(index){
????var?str1?=?$(this).find('.progress-sbar').text();
????var?arr1?=?str1.split(",");
????var?strNew1?=?parseInt(arr1.join(""));
????var?str2?=?$(this).find('.progress-lbar').text();
????var?arr2?=?str2.split(",");
????var?strNew2?=?parseInt(arr2.join(""));
????var?c?=?((strNew1/strNew2)*100).toFixed(2)+'%';
?????$('li?.progress-sbar').eq(index).css('width',c);
???})

反對(duì) 回復(fù) 2017-10-23