如何在一個頁面上有兩個不同的變量？ （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));
            }
        }
    );
});

干杯