Cleaner way to randomly get a string from multiple arrays with JS/jQuery?

Question

Multiple arrays are automatically generated server side with no way of modifying it with the names: section1, section2, section3 so on and so forth. There is always a minimum of one value per array and a maximum of 50 in each array.

Example array list:

section1 = ['ABC100', 'ABC105', 'ABC209'];
section2 = ['ABC400', 'ABC705', 'ABC629'];
section3 = ['ABC176', 'ABC136', 'ABC279'];

I currently need to randomly select one value from each array and update an image src attribute. I do have access to the image HTML, so can change classes etc.

Current HTML example:

<div id="wrapper">
    <img class="section1" src="">
    <img class="section2" src="">
    <img class="section3" src="">
</div>

My javascript and jQuery for randomly selecting a value from it's matching array and updating the image src is:

var $pathName = '/images/gallery/';
var $fileExtension = '.jpg';

var $section1R = section1[Math.floor(Math.random()*section1.length)];

var $section2R = section2[Math.floor(Math.random()*section2.length)];

var $section3R = section3[Math.floor(Math.random()*section3.length)];

$('.section1').attr('src', $pathName + $section1R + $fileExtension);
$('.section2').attr('src', $pathName + $section2R + $fileExtension);
$('.section3').attr('src', $pathName + $section3R + $fileExtension);

This seems really messy. Is there a way of making this cleaner without repeating so much code? I know it works, but I'd like to learn better ways of coding repeated functions.

Don't make a list of array variables, but an array of them that you can iterate? — Bergi
– Bergi, Commented Jan 22, 2013 at 11:56

Denys Séguret · Accepted Answer · 2013-01-22 11:59:33Z

3

You might do this :

$('#wrapper img[class^=section]').attr('src', function(){
    var a = window[this.className];
    return $pathName + a[Math.floor(Math.random()*a.length)]+$fileExtension;
});

But I'd advise against having all your variables in the global namespace. I would thus use an object or an array to hold them.

Note also that usually the convention is to start variable names with a $ only when they hold a jQuery set. Here it's hard to know why you give them such names.

edited Jan 22, 2013 at 11:59

answered Jan 22, 2013 at 11:52

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2013-01-22 11:53:11Z

2

Put the arrays in an array:

var sections = [section1, section2, section3];

Then just pass a function to attr and use the index of the iteration to access the correct array:

$('#wrapper img').attr('src', function(index) {
    var section = sections[index];
    var value = section[Math.floor(Math.random() * section.length)];
    return $pathName + value + $fileExtension;
});

answered Jan 22, 2013 at 11:53

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Reporter · Accepted Answer · 2013-01-22 11:54:55Z

0

Summarize it into a function because all three selections do the same. One way could be:

function rndElement(arrayElement)
{
   return arrayElement[Math.floor(Math.random()*arrayElement.length)];
}

var $section1R = rndElement(section1);

answered Jan 22, 2013 at 11:54

Reporter

3,9345 gold badges36 silver badges50 bronze badges

Collectives™ on Stack Overflow

Cleaner way to randomly get a string from multiple arrays with JS/jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related