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);
}
homeAnchor
, no numbers; then figure out how to make it work targeting elements by index. \$\endgroup\$ – elclanrs Dec 4 '14 at 23:49