CODEWITHSUNDEEP
jquerystylessimplifyconvention
Sharivari
Sharivari

Reputation: 103

How to simplify this JQuery Code

this code works totally fine for me, to highlight the links of the navbar when I'm in a certain sector of my page.

But I'm pretty sure, there is a simpler / shortend up code, that does the same. The problem is, i just copied and pasted this code together, because I have no idea how JQuery works.

Can anyone give me a hint how to simplify this code?

  <!-- START-AREA -->
  $(function() {                     
      $('beginstart').waypoint(function() {
          $('#sec-start').addClass('active');
          $('#sec-info').removeClass('active');
          $('#sec-kontakt').removeClass('active');
          $('#sec-referenzen').removeClass('active');
          $('#sec-angebot').removeClass('active');
          $('#sec-impressum').removeClass('active');
      })});

  $('endstart').waypoint(function() {
      $('#sec-start').addClass('active');
      $('#sec-info').removeClass('active');
      $('#sec-kontakt').removeClass('active');
      $('#sec-referenzen').removeClass('active');
      $('#sec-angebot').removeClass('active');
      $('#sec-impressum').removeClass('active');
  }, {
      offset: 'bottom-in-view'
  });

This is for only one section, but I have six of them, so it would be really cool to have that shorter.

Upvotes: 0

Views: 31

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Combine the selector by comma separating, also you can use the same function in both case.

<!-- START-AREA -->
$(function() {
  // define it as a function
  var fun = function() {
    $('#sec-start').addClass('active');
    $('#sec-info,#sec-kontakt,#sec-referenzen,#sec-angebot,#sec-impressum').removeClass('active');
  };
  // use the function reference  in both
  $('beginstart').waypoint(fun);
  $('endstart').waypoint(fun, {
    offset: 'bottom-in-view'
  });
});

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26444

You can group multiple selectors together with commas

$(function() {                     
      $('beginstart').waypoint(function() {
          $('#sec-start').addClass('active');
          $('#sec-info, #sec-kontakt, #sec-referenzen, 
             #sec-angebot, #sec-impressum').removeClass('active');
      })});

Upvotes: 1

Related Questions