jquery - 尝试使用相同的 Jquery 创建多个水平条形图

Question

我已经用第十几种方式编辑了以下代码。我已经创建了我想要的条形图，但我不知道如何在我的 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);


});

Answer 1

一种可能的方式是: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)代码，可以多次实例化并为每个实例传入栏和输入元素。