[英]How can I have two of these on one page with different variables? (JQuery)
I need to have 2 of these one page but each with different percentages. 我需要有两个这样的页面,但每个页面都有不同的百分比。 When I try re-writing the JS or even use different class/ID names it still always pulls from the first SPAN.
当我尝试重写JS或甚至使用不同的类/ ID名称时,它仍然总是来自第一个SPAN。
http://jsfiddle.net/K62Ra/ 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 and CSS in the Fiddle. 小提琴中的JS和CSS。
Much Thanks. 非常感谢。
This one will work smoothly: 这个将顺利运作:
http://jsfiddle.net/K62Ra/7/ 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);
});
The interval has to be terminated as well, or it will run infinitely (though not doing anything). 间隔也必须终止,否则它将无限运行(尽管没有做任何事情)。
I've changed your id="bar"
into a class. 我把你的
id="bar"
改成了一个类。 Then I'm running a each loop
for the .bar
classes. 然后我正在为
.bar
类运行each loop
。 here is the fiddle: http://jsfiddle.net/K62Ra/3/ 这里是小提琴: http : //jsfiddle.net/K62Ra/3/
here is the code: 这是代码:
$('.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");
Like some of the comments have stated, having duplicate ids is bad design and can cause some weird errors. 就像一些评论所说,有重复的ID是糟糕的设计,可能会导致一些奇怪的错误。
You can find a solution to your problem by changing a number of things. 您可以通过更改许多内容找到问题的解决方案。 One, instead of referring to divs in you selectors by id'#', you can infer them by class '.'
一,不是通过id'#'引用你选择器中的div,你可以通过类''来推断它们。 like
喜欢
$('.bar')
The next step would be to ensure exclusivity for each div with class 'container' by using a closure 下一步是通过使用闭包来确保每个div与类'容器'的排他性
$('.container').each(function(){
var x
var y
.
.
});
And finally, avoid 'selecting' elements in the selector directly, but use $(this) and .find() to ensure you are within the current div with class 'container'. 最后,避免直接在选择器中“选择”元素,但使用$(this)和.find()来确保您在当前div中使用类'container'。
http://jsfiddle.net/K62Ra/5/ 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");
});
There are already several good answers here. 这里已有几个很好的答案。 I would recommend validating your html.
我建议验证你的HTML。 Also some of your css was causing weirdness when there was scrolling involved (fixed background images weren't scrolling.)
还有一些你的css在涉及滚动时引起了怪异(固定的背景图像没有滚动。)
I took a slightly different approach than everyone else. 我采取了与其他人略有不同的方法。 Instead of using a setInterval I went with $.animate and a step function.
我没有使用setInterval,而是使用了$ .animate和一个步进函数。 Like others, I chose a class to target each of the items: 'fill-me-up'.
和其他人一样,我选择了一个课程来定位每个项目:“填充我”。
Fiddle: http://jsfiddle.net/LFbKs/6/ 小提琴: http : //jsfiddle.net/LFbKs/6/
NOTE : Check the fiddle since I modified the HTML (very slightly) and the css to a larger degree. 注意 :检查小提琴,因为我修改了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));
}
}
);
});
Cheers 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.