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

乾杯