[英]Execute a Callback function on multiple elements
I had a question about the way I could execute a callback on multiple elements in my div. 我对在div中对多个元素执行回调的方式有疑问。
So here it is. 就是这样 I have a div that contains two columns ( col1 and col2 , both taking 50% of the parent div and on float:left ) many projects displayed as images.
我有一个div,其中包含两列( col1和col2 ,两者都占父div的50%,并且在float:left上 )显示为图像的许多项目。 A big project is twice bigger (height) than a small one.
大型项目的规模(高度)是小型项目的两倍。 The configuration created makes it possible to display properly the projects to fill the div and not leave blank parts.
创建的配置可以正确显示项目以填充div,而不会留下空白部分。 So, basically, if we have 3 projects, we get a big project in col1 and 2 small in col2.
因此,基本上,如果我们有3个项目,则在col1中有一个大项目,在col2中有2个小项目。 With 4 projects, we get a small + big in col1 and a big + small in col2.
通过4个项目,我们在col1中得到一个小+大,在col2中得到一个大+小。 And so on.
等等。
Problem is, when i'm filtering the different projects (in this example, by, for example, displaying the projects made in JS only, I use show() and hide() which works properly. If animated, the projects just disappear because the hide() seems to be called while the show() isn't completed yet. I was then told about the call back function but it seems to work only on one element, not multiples. Which is not optimal since my filtering always displays multiple projects. I would like to know how to execute the function properly, so it works on all the projects because it seems to apply to only one. 问题是,当我过滤不同的项目时(在此示例中,例如,通过仅显示用JS制作的项目,我使用show()和hide()可以正常工作。如果设置了动画,则项目会消失,因为hide()似乎在show()尚未完成时被调用,然后被告知回调函数,但它似乎只作用于一个元素,而不是倍数,这不是最佳选择,因为我的过滤总是显示我想知道如何正确执行该功能,因此它适用于所有项目,因为它似乎仅适用于一个项目。
Thanks in advance. 提前致谢。
<script>
function update_projects(projects_ids){
console.log("Update projects : " + projects_ids);
var projects_top = $('.projects').offset().top;
if ($(window).scrollTop() > projects_top) {
$(window).scrollTop(projects_top);
}
var projects_config = generate_configuration(projects_ids.length);
var project_index = 0;
//$('.project').show();
$('.project').slideUp(2000, function(){
var odd = false;
for (var i = 0; i < projects_config.col1.length; ++i) {
var block_type = projects_config.col1[i];
var project_id = projects_ids[project_index++];
var odd_selector = '';
if (block_type == 'small') {
if (odd == false) {
odd_selector = '.left';
} else {
odd_selector = '.right';
}
odd = !odd;
}
$('.col1 .project_' + project_id + '.' + block_type + odd_selector).show();
}
odd = false;
for (var i = 0; i < projects_config.col2.length; ++i) {
var block_type = projects_config.col2[i];
var project_id = projects_ids[project_index++];
var odd_selector = '';
if (block_type == 'small') {
if (odd == false) {
odd_selector = '.left';
} else {
odd_selector = '.right';
}
odd = !odd;
}
$('.col2 .project_' + project_id + '.' + block_type + odd_selector).show();
}
});
resize();
}
As you've discovered, the completion callback on an animation is called once per element, not once per set. 您已经发现,动画的完成回调每个元素调用一次,而不是每个集合调用一次。
To have a callback that is invoked when all of the animations have finished, use the .promise()
method on the collection: 要在所有动画完成后调用回调,请在集合上使用
.promise()
方法:
$('.myClass').slideUp(2000).promise().then(function() {
// not called until all animations have finished
...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.