具有相同jquery的多个选择器

Question

我已经为一些靠近的元素编写了一些简单的 jquery。每个都工作得很好，但我希望能得到一些帮助，使我的 jquery 更高效，更小，以便放置在单独的 JS 文件中。我是 jQuery 的新手，并不真正知道如何结合我所写的内容。任何帮助是极大的赞赏！我的代码如下：

$('.fade-carousel').on('init', function(event, slick, currentSlide, nextSlide) {
  if ($('.slick-active .slide-container div').hasClass('intro-bg')) {
    $('#header').addClass('transparent-header')
  } else {
    $('#header').removeClass('transparent-header');
  }
  $('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if ($('.slide-container:eq(' + nextSlide + ') > div').hasClass('intro-bg')) {
      $('#header').addClass('transparent-header')
    } else {
      $('#header').removeClass('transparent-header');
    }

  });
});
$('.fade-carousel').on('init', function(event, slick, currentSlide, nextSlide) {
  if ($('.slick-active .slide-container div').hasClass('intro-bg')) {
    $('.slick-arrow').removeClass('black-arrow')
  } else {
    $('.slick-arrow').addClass('black-arrow')
  }
  $('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if ($('.slide-container:eq(' + nextSlide + ') > div').hasClass('intro-bg')) {
      $('.slick-arrow').removeClass('black-arrow')
    } else {
      $('.slick-arrow').addClass('black-arrow');
    }
  });
});
$('.fade-carousel').on('init', function(event, slick, currentSlide, nextSlide) {
  if ($('.slick-active .slide-container div').hasClass('intro-bg')) {
    $('.scroll-arrow i').removeClass('black-arrow')
  } else {
    $('.scroll-arrow i').addClass('black-arrow')
  }
  $('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if ($('.slide-container:eq(' + nextSlide + ') > div').hasClass('intro-bg')) {
      $('.scroll-arrow i').removeClass('black-arrow')
    } else {
      $('.scroll-arrow i').addClass('black-arrow');
    }
  });
});
$('.fade-carousel').on('init', function(event, slick, currentSlide, nextSlide) {
  if ($('.slick-active .slide-container div').hasClass('video-intro')) {
    $('#header').addClass('transparent-header')
  }
  $('.fade-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    if ($('.slide-container:eq(' + nextSlide + ') > div').hasClass('video-intro')) {
      $('#header').addClass('transparent-header')
    }
  });
});

Answer 1

您可以在工作的顶部预先计算 jquery 对象：

var $scrollArrowIcon = $('.scroll-arrow i');

然后用它来做类似的事情

$scrollArrowIcon.addClass('whatever');
$scrollArrowIcon.removeClass('something_else');

这里的一个风险是，当您的点击处理程序运行时，与该选择器匹配的实际元素集可能已经改变，并且您的 jQuery 对象将只包含您创建它时存在的 DOM 元素。

您可以利用 jquery 链接 (http://www.jquery-tutorial.net/introduction/method-chaining/) 改进现有代码...例如

$('.fade-carousel').on('init', function() {
  ... do something
}).on('click', function() {
  ... something else
}).on('beforeChange', function() {
  ... something else again
});

当你有“如果 x，添加类 Y，否则删除类 Y”时，你可以减少重复：

$('#header').toggleClass(
  'transparent-header',
  $('.slick-active .slide-container div').hasClass('intro-bg')
);