Dynamically adding and removing HTML classes

Question

I am trying to add an active class to my subnavigation using the waypoints jQuery. I am trying to avoid writing multiple functions to adhere to the DRY idea. The waypoints toggle the function based on their location in the markup. Any suggestions welcome.

Markup

 <!-- top section -->
<!-- waypoint class-->
<a href="#" class="homeNavItem1"></a>
<!-- partial for the code -->
<?php include 'partials/homepage/topHero.php'; ?>
<!-- content section one events -->
<!-- waypoint2 class--> 
<a href="#" class="homeNavItem2"></a>
<!-- partial for the code -->
<?php include 'partials/homepage/section1.php'; ?>

JavaScript/jQuery

Backwards way:

$('.homeNavItem1').waypoint(function(direction) {
 $('.homeAnchor1').addClass("subActive");
 $('.homeAnchor2').removeClass("subActive");
 $('.homeAnchor3').removeClass("subActive");
 $('.homeAnchor4').removeClass("subActive");
 $('.homeAnchor5').removeClass("subActive");
});

Efficient code attempt:

function waypointItem(x, y, i) {
 $('.homeNavItem' + x).waypoint(function(direction){
 $('.homeAnchor' + y).addClass("subActive");
 $('.homeAnchor' + i).removeClass("subActive");
 });
}
for (i = 2; i <= 6; i ++){
 waypointItem(1, 1, i);
 console.log(i);
}

• elclanrs: Whenever you have incrementing numbers, it probably means you have to use a common class. So you want homeAnchor, no numbers; then figure out how to make it work targeting elements by index.

Answer 1

A common question,

@elclanrs is right that you probably want a common class for your home anchor tags unless you truly want to style them all differently.

Then you could simply turn off the current active anchor with

$('.homeAnchor.subActive').removeClass("subActive");

Otherwise, you could try and see if this works for you:

$('.subActive').removeClass("subActive");

That assumes that on the whole page you use subActive only for your home anchors of course.