Question

I’m using the following simple jquery function, but I want to use it on multiple elements with different classes. How to I make my code shorter by using an array?

$(function() {

  $('.red').attr("href", "images/gallery/redSmall.jpg");
  $('.blue').attr("href", "images/gallery/blueSmall.jpg");
  $('.green').attr("href", "images/gallery/greenSmall.jpg");
  $('.black').attr("href", "images/gallery/blackSmall.jpg");

});

thank you

Answer 1

I am using the array of the classes and than with a for loop applay the href changes to the matching elements:

$(function() {
    var classes = ['red', 'blue', 'green', 'black'];

    for(var i=0; i < classes.length; i++)
    {
        $('.'+classes[i]).attr("href", "images/gallery/"+classes[i]+"Small.jpg");
    }
});

**You can add as many classes as you want.