我已经用第十几种方式编辑了以下代码。我已经创建了我想要的条形图，但我不知道如何在我的 html 中创建具有不同值的重复条形图。我已经在 div 类上尝试了“jQuery.each”实用程序，其中隐藏了我为此目的创建的输入，但它只是返回一个空圆圈。当我复制代码时，显然它只是用最后一个输入值创建了两个条。
我包含了原始代码，因为我的更改充其量是草率的，我不想进一步混淆问题
代码链接http://jsfiddle.net/Sk8erPeter/KAxyt/
HTML
<div class="wrap">
<h1>Horizontal bar graph with CSS3 and jQuery</h1>
<p>Source: <a href="http://www.jscraft.net/experiments/horizontal-bar-graph-with-css3-and-jquery.html">http://www.jscraft.net/experiments/horizontal-bar-graph-with-css3-and-jquery.html</a></p>
<p>Mod by Pete: Starting from 65% (see the initial value of the input field!)</p>
<div class="bar">
<div class="percent">
<span style="width: 100%;"></span>
</div>
<div class="circle">
<span>0%</span>
</div>
</div>
<div class="text">
<input type="text" class="input" value="65" />
<small>Please change a value and hit the enter key.</small>
</div>
</div>
CSS
html, body {
padding:0;
margin:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
background:#eee;
color:#777;
width:500px;
position:relative;
}
/*
.carbonad {
border:none !important;
background: none !important;
position:absolute;
top:20px;
right:20px;
}
*/
.wrap {
position:absolute;
/*
top:50%;
left:50%;
*/
width:400px;
height:500px;
margin:-200px 0 0 -400px;
margin:30px;
}
h1 {
font-size:40px;
font-family:'PT Sans Narrow', sans-serif;
text-align:center;
margin:0;
/*
margin-bottom:120px;
*/
text-shadow:5px 5px 0 #ddd;
}
.bar {
float:left;
clear:both;
width:100%;
height:40px;
position:relative;
margin-top:55px;
}
.bar .percent {
background:#2caedd;
background:-moz-linear-gradient(left, #2caedd 0%, #86dd2a 28%, #e0d72a 46%, #e8902c 66%, #ed2d2d 86%, #ff0000 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#2caedd), color-stop(28%,#86dd2a), color-stop(46%,#e0d72a), color-stop(66%,#e8902c), color-stop(86%,#ed2d2d), color-stop(100%,#ff0000));
background:-webkit-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:-o-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:-ms-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2caedd', endColorstr='#ff0000', GradientType=1);
float:left;
width:100%;
height:40px;
position:relative;
}
.bar .percent span {
display:block;
position:absolute;
top:0;
right:0;
z-index:2;
width:100%;
height:40px;
background:rgba(255, 255, 255, .7);
}
.bar .circle {
display:block;
position:absolute;
top:50%;
left:0;
z-index:3;
margin:-40px 0 0 -40px;
width:80px;
height:80px;
line-height:80px;
text-align:center;
font-size:20px;
font-family:'PT Sans Narrow', sans-serif;
color:#fff;
background:rgba(0, 0, 0, .1);
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}
.bar .circle.rotate {
-webkit-transform:rotate(1080deg);
-moz-transform:rotate(1080deg);
-o-transform:rotate(1080deg);
}
.bar .circle span {
display:inline-block;
width:70px;
height:70px;
line-height:70px;
background:rgba(0, 0, 0, .3);
-moz-border-radius:35px;
-webkit-border-radius:35px;
border-radius:35px;
}
.text {
position:absolute;
bottom:0;
left:50%;
width:170px;
margin-left:-85px;
}
.text .input {
width:140px;
padding:15px;
border:1px solid #ddd;
text-align:center;
font-size:20px;
font-family:'PT Sans Narrow', sans-serif;
}
.text small {
display:block;
text-align:center;
margin-top:15px;
font-size:11px;
}
a {
color:#eee;
}
p a {
color:black;
}
Javascript
// http://www.jscraft.net/demo/experiment/bargraph/js/init.js
$(function(){
var input = $('.input'),
bar = $('.bar'),
bw = bar.width(),
percent = bar.find('.percent'),
circle = bar.find('.circle'),
ps = percent.find('span'),
cs = circle.find('span'),
name = 'rotate';
input.on('keydown', function(e){
if (e.keyCode == 13){
var t = $(this), val = t.val();
if (val >=0 && val <= 100){
var w = 100-val, pw = (bw*w)/100,
pa = {
width: w+'%'
},
cw = (bw-pw)/2,
ca = {
left: cw
}
ps.animate(pa);
cs.text(val+'%');
circle.animate(ca, function(){
circle.removeClass(name)
}).addClass(name);
} else {
alert('range: 0 - 100');
t.val('');
}
}
});
//
var e = jQuery.Event("keydown");
e.keyCode = e.which = 13; // # Some key code value
$(input).trigger(e);
});
最佳答案
一种可能的方式是:http://jsfiddle.net/byrhg9nx/2/
$(function(){
var HorizontalBarGraph = function (barIn, inputIn) {
var input = $(inputIn),
bar = $(barIn),
bw = bar.width(),
percent = bar.find('.percent'),
circle = bar.find('.circle'),
ps = percent.find('span'),
cs = circle.find('span'),
name = 'rotate';
input.on('keydown', function(e){
if (e.keyCode == 13){
var t = $(this), val = t.val();
if (val >=0 && val <= 100){
var w = 100-val, pw = (bw*w)/100,
pa = {
width: w+'%'
},
cw = (bw-pw)/2,
ca = {
left: cw
}
ps.animate(pa);
cs.text(val+'%');
circle.animate(ca, function(){
circle.removeClass(name)
}).addClass(name);
} else {
alert('range: 0 - 100');
t.val('');
}
}
});
//
var e = jQuery.Event("keydown");
e.keyCode = e.which = 13; // # Some key code value
$(input).trigger(e);
}
new HorizontalBarGraph( $('.bar')[0], $('.text>input')[0] );
new HorizontalBarGraph( $('.bar')[1], $('.text>input')[1] );
});
基本上，以面向对象的方式定义公共(public)代码，可以多次实例化并为每个实例传入栏和输入元素。
关于jquery - 尝试使用相同的 Jquery 创建多个水平条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28329311/