Question

I have an array which displays info on a page. Id like to be able to reverse the order on click of a button.

.reverse() works but Im unsure how to call it on button click, and then refresh the display to show the reversed array?

my setup looks like:

included js file with my array (and code to display the array), my array is stored in a variable (longer than this but just for show):

var images_gallery = [
    {
        image_src: "images/xmas-1.jpg",
    },
    {
        image_src: "images/xmas-2.jpg",
    },
    {
        image_src: "images/xmas-3.jpg",
    }
]

var image = $('<img>').addClass('librarian-gallery-img');
image.attr('src',images_gallery.image_src);
image.appendTo($('#gallery-container');

this displays my array (images) into my html. (simplified version, but thats the basics)

My issue is how to refresh the array and its display on the page

Answer 1

You can use attr() to change image src.

$('#buttonId').click(function(){
  images_gallery.reverse();
  $('#gallery-container img').attr('src', function( index){
      return images_gallery[index].image_src
  })

});

Using function argument of attr() provides access to index of element in collection