If class true add url to iframe and work through a list of url's then repeat?

Question

I am wondering how to go about adding different url's to an iframe if an element has the class="show" so the 1st time the element class is "show" it will load the url: about.html

the second time the same element has the class "show" it will open work.html

and then the 3d time the same element has the class "show" it will open contact.html

etc etc

but on the last class that is "show" that opens contact.html how would I then start it again so the 4th time the class equals "show" it opens about.html again and the 5th time the class is "show" it opens work.html etc etc ?

Any idea's thanks! I hope this makes sense also.

edit the class show changes between show and hidden depending on if the video modal is open or not so the first time the class is show it should display for example about.html and then for the 2nd time the class is show it should be work.html and the 3rd contact etc hope that makes better sense

Answer 1

You could use the data api jquery provides instead of using a class, here is a link to the documentation: https://api.jquery.com/data/

for example:

//Default value
$('#foo').data('num', 1);

//Go to next page event
$("#GoToNextPage").on("click", function(){
 NextUrl();
});  

function NextUrl(){
    var elem = $('#foo');
    var number = elem.data('num');
    if(number === 2){
      elem.src = 'URL.html'
    }
}