对多个元素执行回调函数

Execute a Callback function on multiple elements

本文关键字：回调 函数 执行 元素      更新时间：2023-09-26

我有一个关于如何对div 中的多个元素执行回调的问题。

所以它来了。我有一个包含两列的div（col1 和 col2，都占父div 的 50%，并且在 float：left 上）许多项目显示为图像。一个大项目比一个小项目大两倍（高度）。创建的配置可以正确显示项目以填充div而不是留下空白部分。所以，基本上，如果我们有 3 个项目，我们在 col1 中得到一个大项目，在 col2 中得到 2 个小项目。通过 4 个项目，我们在 col1 中得到一个小 + 大，在 col2 中得到一个大 + 小。等等。

问题是，当我过滤不同的项目时（在这个例子中，例如，通过仅显示用JS制作的项目，我使用show（）和hide（）正常工作。如果动画化，项目就会消失，因为 hide（） 似乎在 show（） 尚未完成时被调用。然后我被告知回调函数，但它似乎只适用于一个元素，而不是多个元素。这不是最佳的，因为我的过滤总是显示多个项目。我想知道如何正确执行该功能，因此它适用于所有项目，因为它似乎仅适用于一个项目。

提前谢谢。 

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

如您所发现的，动画的完成回调是每个元素调用一次，而不是每个集调用一次。

若要在所有动画完成后调用回调，请在集合上使用 .promise() 方法：

$('.myClass').slideUp(2000).promise().then(function() {
    // not called until all animations have finished
    ...
});
相关文章：