在jquery中使用'this'属性来使代码可重用

Question

嗨，我已经创建了一个代码，当元素进入视图时添加一个类，如果你愿意，可以添加视差。但是我想让物品以不同的速度进入下一个比之前更慢的物品。我似乎无法使用'this'属性使这个代码可重用，所以我不必为我想要使用它的每个实例重写它。

if (!jQuery('#thumbnail-section-1 #thumbnail-preview.thumbnail-preview-fade-in').hasClass("is-showing")) {    
      if(wScroll > $('#thumbnail-section-1').offset().top - ($(window).height() / 1.2)) {

        $('#thumbnail-section-1 #thumbnail-preview.thumbnail-preview-fade-in').each(function(i){

          setTimeout(function(){
            $('#thumbnail-preview.thumbnail-preview-fade-in').eq(i).addClass('is-showing');
          }, (700 * (Math.exp(i * 0.35))) - 700);

          setTimeout(function(){
            $('#thumbnail-section-1 .overlay2 h2').eq(i).addClass('showing');
          }, (700 * (Math.exp(i * 0.35))) - 700);

        });
      }
    }

Answer 1

没有必要使用this，因为你的.each调用也可以传递当前元素：

var $sect = $('#thumbnail-section-1');
var $sel = $sect.find('#thumbnail-preview.thumbnail-preview-fade-in');
var $h2 = $sect.find('.overlay2 h2');

if (!$sel.hasClass('is-showing')) {

    if (wScroll > $sect.offset().top - ($(window).height() / 1.2)) {

        $sel.each(function(i, el) {   // <-- here
            var delay = 700 * (Math.exp(i * 0.35) - 1);

            setTimeout(function() {
                $(el).addClass('is-showing');
                $h2.eq(i).addClass('showing');
            }, delay);
        });
    }
}