Script is working but would like to optimizing for speed

The script below does achieve the task of changing image src with corresponding page content #ID however, I would like to optimize the script to increase functionality and loading speeding. Can any javascript / jQuery developer(s) suggest alternative script(s) with explanation?

Code:

---


$('#about').waypoint(function(event, direction){
    if (direction ==='down'){

    $('#myLogo').attr('src','./images/logo3.png');
    }else{
        direction ==='up';
    $('#myLogo').attr('src','./images/logo2.png');
    }
});

$('#portfolio').waypoint(function(event, direction){
    if (direction === 'down'){

    $('#myLogo').attr('src','./images/logo4.png');
    }else{
        direction === 'up';
    $('#myLogo').attr('src','./images/logo3.png');
    }
});

 $('#skills').waypoint(function(event, direction){
    if (direction === 'down'){

    $('#myLogo').attr('src','./images/logo5.png');
    }else{
        direction === 'up';
    $('#myLogo').attr('src','./images/logo4.png');
    }
});

$('#myclients').waypoint(function(event, direction){
    if (direction === 'down'){

    $('#myLogo').attr('src','./images/logo6.png');
    }else{
        direction === 'up';
    $('#myLogo').attr('src','./images/logo5.png');
    }
});
    $('#contact').waypoint(function(event, direction){
    if (direction === 'down'){

    $('#myLogo').attr('src','./images/logo7.png');
    }else{
        direction === 'up';
    $('#myLogo').attr('src','./images/logo6.png');
    }
});

---

First its seems your selectors #about, #portfolio maybe siblings in someway judging by how they all use the waypoint.
You could just use the $(parent child) selector (need to see your HTML) you can then just use a switch($(this).attr('id')) to match each case

$(parent child).waypoint(function(event, direction){
var url='';
switch($(this).attr('id')):
case 'about':
url=(direction=='down')?'./images/logo3.png':'./images/logo2.png';
break;
case 'portfolio':
url=(direction=='down')?'./images/logo4.png':'./images/logo3.png';
break;
.....
.....

$('#myLogo').attr('src', url);
end;

});


The $(parent child) is defined by your HTML structure and should be specific enough so it only get childNodes with the IDs shown in your original post.

Since you are referencing HTML tag Ids, you could wrap each call to jQuery with:

Code:

---

if (document.getElementById("my_id")) {
  $("#my_id").waypoint( ... );
}

---

Thanks HollyHTTP and Toicontien for you help. I will give your solutions a try. :-)