Question

我在这里创建了一个小提琴：https://jsfiddle.net/svyyow89/4/

当您调整屏幕大小时，行中的某些元素会被隐藏，而计数器会显示隐藏元素的数量。

当我只有一个“容器”元素时，我才能正常工作，但是我需要脚本为每个带有“container”类的元素做同样的事情。

如我的小提琴所示，我有代码在屏幕调整大小时显示/隐藏元素。但是，当每个“容器”包含不同数量的“项目”时，似乎文本计数器只是将它们设置为相同的值。我认为我使用“this”变量意味着代码将分别处理“容器”中的元素。

感谢您提供的任何帮助。

$(window).on('resize',function() {

    $(".container").each(function(){
          var numImages = $(this).find(".item").length;
          var numToShow = numImages;
          var screenWidth = $( window ).width();
          var numFit = Math.floor(screenWidth / 80);

          $(this).find( ".item" ).removeClass( "item-show" );
          $(this).find( ".more" ).removeClass( "more-show" );
          $(this).find('.more').html('');

          if(numFit < numImages){
              numToShow = numFit - 1;
              $(this).find('.more').addClass("more-show");
          } else {
              $(this).find('.more').removeClass("more-show");
          }

          $(this).find( ".item" ).slice( 0, numToShow ).addClass( "item-show" );

          var numHidden = $(".container > *").filter(":hidden").size();

          $(this).find('.more').html('+'+numHidden+' more');

   });
});

$(document).ready(function() {
    $(window).trigger('resize');
});

Answer 1

大多数情况下，你做得对，你错过了一个陈述：

var numHidden = $(".container > *").filter(":hidden").size();

你也需要在那里使用this：

var numHidden = $(this).children(":hidden").size();

（使用children，因为您使用了直接子组合>，而children可以接受过滤器，因此我们可以将filter折叠到其中。）

但是，请记住，$()是一个函数。每次调用它时，它都必须工作，每次调用它时，它都会分配最终必须清理的内存（内存流失）。所以，不要在任何地方写$(this)，而是一次（在each回调中）并记住结果：

var $this = $(this);

这在任何对性能敏感的代码（例如resize处理程序）中都很重要，而通常（并非总是）是良好的做法。

jQuery'each'函数和'this'变量

1 个答案: