Multiple Selectors with same jquery

Question

I have written some simple jquery for a few elements that are close together. Each one works just fine, but I was hoping to get some help making my jquery more efficient, and smaller in order to place in a seperate JS file. I am newer to jQuery and do not really know how to combine what I have written. Any help is greatly appreciated! My code is below:

$('.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

You could precompute the jquery objects at the top of your work:

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

And then use that for things like

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

One risk here though is that by the time your click handlers run, the actual set of elements that match that selector might have changed, and your jQuery object will only contain the DOM elements that were present at the time you created it.

You can improve your existing code by taking advantage of jquery chaining ( http://www.jquery-tutorial.net/introduction/method-chaining/ )... for example

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

When you have the "if x, add class Y, else remove class Y", you can reduce repetition with:

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