如何在一个页面上有两个不同的变量？ （JQuery的）

Question

我需要有两个这样的页面，但每个页面都有不同的百分比。 当我尝试重写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

这个将顺利运作：

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 2

我把你的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 3

就像一些评论所说，有重复的ID是糟糕的设计，可能会导致一些奇怪的错误。

您可以通过更改许多内容找到问题的解决方案。 一，不是通过id'＃'引用你选择器中的div，你可以通过类''来推断它们。 喜欢

$('.bar')

下一步是通过使用闭包来确保每个div与类'容器'的排他性

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

最后，避免直接在选择器中“选择”元素，但使用$（this）和.find（）来确保您在当前div中使用类'container'。

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 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));
            }
        }
    );
});

干杯