如何在一个页面上有两个不同的变量? (JQuery的)

时间:2014-04-08 17:58:25

标签: javascript jquery html css

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

非常感谢。

4 个答案:

答案 0 :(得分: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);
});

间隔也必须终止,否则它将无限运行(尽管没有做任何事情)。

答案 1 :(得分:0)

我已将您的id="bar"更改为班级。然后我为each loop课程运行.bar。这是小提琴: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");

答案 2 :(得分:0)

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

您可以通过更改许多内容找到问题的解决方案。一,而不是 通过id&#39;#&#39;引用你的选择器中的div,你可以按类推断它们。&#39;像

$('.bar')

下一步是确保每个div的排他性与容器&#39;容器&#39;通过使用闭包

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

最后,避免选择&#39;选择器中的元素直接,但使用$(this)和.find()来确保你在当前div中使用class&#39; container&#39;。

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

答案 3 :(得分:0)

这里已有好几个答案。我建议验证你的HTML。还有一些你的css在涉及滚动时会引起怪异(固定的背景图像不会滚动。)

我采取了与其他人略有不同的方法。我没有使用setInterval,而是使用了$ .animate和一个步进函数。和其他人一样,我选择了一个课程来定位每个项目:&#39;填充我...

小提琴: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));
            }
        }
    );
});

干杯