如何在不同变量的页面上显示其中的两个？ （jQuery）

Question

我需要这些页面中的2个，但每个页面的百分比不同。当我尝试重写JS或者甚至使用不同的类/ ID名称时，它仍然始终从第一个SPAN抽取。

http://jsfiddle.net/K62Ra/

<div class="container"> 
<div class="bw"></div> 
<div class="show"></div> 
<div id="bar" data-total="100"> 
    <div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div> 
</div> 

JS和CSS在拨弄。

非常感谢。

Answer 1

我已将id="bar"更改为类。然后，我为.bar类运行each loop。这里是小提琴：http://jsfiddle.net/K62Ra/3/

这里是代码：

$('.bar').each(function (index, element) { 
    percent = $(this).find('span').html(); 

    total = $(this).attr('data-total'); 
    percentStart = 0; 

    setInterval(function() { 
    $('.show').css('height', percentStart/total * 100 + '%'); 
    $(this).css('height', percentStart/total * 100 + '%'); 
    $(this).find('span').html('%' + percentStart); 
    if (percentStart < percent) { 
     percentStart = percentStart + 1; 
    } 
    }, 35); 


}); 
$(".bar div").addClass("load"); 

Answer 2

像一些评论所指出的，有重复的ID是坏的设计，可能会导致一些奇怪的错误。

你可以通过改变一些东西来找到解决问题的办法。其中一个，而不是 指的是ID为'＃'的选择器中的div，你可以通过class'。'来推断它们。像

$('.bar') 

下一个步骤将是通过使用封闭

$('.container').each(function(){ 
    var x 
    var y 
    . 
    . 
}); 

最后，避免在选择直接地“选择”元素，以确保用于与类“容器”各自的div排他性，而是使用$（this）和.find（）以确保您处于具有类“容器”的当前div内。

http://jsfiddle.net/K62Ra/5/

$('.container').each(function(){ 
    var percent = $(this).find('div.bar div span').html(); 
    var total = $(this).find('div.bar').attr('data-total'); 
    var percentStart = 0; 

    var that = $(this); 

    setInterval(function() { 
     that.find('.show').css('height',percentStart/total*100+'%'); 
     that.find('div.bar').css('height',percentStart/total*100+'%'); 
     that.find('div.bar div span').html('%'+percentStart); 
     if(percentStart<percent) {percentStart=percentStart+1;} 
    },35); 

    $(this).find("div.bar div").addClass("load"); 
}); 

Answer 3

这人会工作进展顺利：

http://jsfiddle.net/K62Ra/7/

$('.bar').each(function() { 
    var percentStart = 0; 
    var total = $(this).data('total'); 
    var percent = parseInt($(this).find('span').html()); 

    $(this).find('> div').addClass("load"); 

    var that = this; 
    var timer = setInterval(function() { 
     $(that).siblings('.show').css('height', percentStart/total*100+'%'); 
     $(that).css('height', percentStart/total*100+'%'); 
     $(that).find('span').html('%'+percentStart); 
     if(percentStart<percent) { percentStart=percentStart+1; return; } 
     clearInterval(timer); 
    }, 35); 
}); 

的间隔要终止为好，否则会无限地运行（虽然没有做任何事情） 。

Answer 4

这里已经有几个很好的答案。我会建议验证你的HTML。还有一些CSS在涉及滚动时引起奇怪（固定背景图像不滚动）。

我采取了与其他人稍有不同的方法。而不是使用setInterval，我去了$ .animate和一个步骤函数。和其他人一样，我选择了一个班级来瞄准每一个项目：“填满我”。

小提琴：http://jsfiddle.net/LFbKs/6/

注意：检查小提琴，因为我修改HTML（非常轻微）和CSS到更大的程度。

// for each item we need to "fill up" 
$('.fill-me-up').each(function(){ 

    // cache DOM references 
    var this$ = $(this) 
     , bar$ = this$.find('.bar') 
     , show$ = this$.find('.show') 
     , span$ = bar$.find('div span') 

     // the target percentage height for this item 
     , p = span$.text() 

     // combine '.bar' and '.show' so we can apply the animation to both 
     , toAnimate = $().add(bar$).add(show$); 

    // add class causing fade-in 
    bar$.find('div').addClass('is-visible'); 

    // animate height to target height over 2 seconds and 
    // at each step, update the span with a truncated value 
    toAnimate.animate(
     { height: p+'%' }, 
     { 
      duration: 2000, 
      step: function(currentStep) { 
       span$.html('%'+currentStep.toFixed(0)); 
      } 
     } 
    ); 
}); 

干杯