Dynamically select which array to run through funciton

Question

I am trying to make a jQuery function dynamically decide which array gets run through it based on a button click. Ideally, this is how it would work:

• User clicks one of the "View More ..." buttons.
• The program loads the next 3 images of that specific category (Sports, Concerts, etc.).

Below is a version of that function working, but, only for the Concerts section:

var altConcert = [
  "Concert 1",
  "Concert 2",
  "Concert 3",
  "Concert 4",
  "Concert 5",
  "Concert 6"
];

var imgConcert = [
  "https://via.placeholder.com/101/000000",
  "https://via.placeholder.com/102/000000",
  "https://via.placeholder.com/103/000000",
  "https://via.placeholder.com/104/000000",
  "https://via.placeholder.com/105/000000",
  "https://via.placeholder.com/106/000000"
];

var altSport = [
  "Sport 1",
  "Sport 2",
  "Sport 3",
  "Sport 4",
  "Sport 5",
  "Sport 6"
];

var imgSport = [
  "https://via.placeholder.com/101/0000FF",
  "https://via.placeholder.com/102/0000FF",
  "https://via.placeholder.com/103/0000FF",
  "https://via.placeholder.com/104/0000FF",
  "https://via.placeholder.com/105/0000FF",
  "https://via.placeholder.com/106/0000FF"
];

var count = 0;

$(".load-more-concerts").click(function() {
  //Load the next 3 images
  for (i = 0; i < 3; i++) { 
      
    $("#extraConcert").append(
      '<div">' +
        '<h3>'+altConcert[count]+'</h3>' +
        '<img src="'+imgConcert[count]+'" alt="'+altConcert[count]+'"/>' +
      '</div>');

    count++;
  }

  //Scroll to the top (+100px) of the newly loaded images
  $('<div id="new-concert-div'+count+'">&nbsp;</div>').appendTo('#extraConcert');
  $('body, html').animate({ scrollTop: $('#new-concert-div'+count+'').offset().top - 100}, 1000);

  //Remove the "View More" button when out of images
  if (count >= imgConcert.length) {
    $(".view-more-concerts").css("display", "none");
    return;
  }
});

#Concerts { float: left; padding-right: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Concerts">    
  <div id="extraConcert">
    <div id="new-concert-div1">&nbsp;</div>
  </div>

  <div class="load-more-concerts">
    <button class="view-more-concerts">View More Concerts</button>
  </div>
</div>


<div id="Sports">
  <div id="extraSports">
    <div id="new-sports-div1">&nbsp;</div>
  </div>

  <div class="load-more-sports">
    <button class="view-more-sports">View More Sports</button>
  </div>
</div>

Is there a way that I could use the ID name ("Sports" or "Concerts") of a div or perhaps pass the array as a parameter to the jQuery function? Or is there some other easier method to solving this that I am completely missing? I am confident I could get this to work if I just duplicated the function with different names, but I am trying to follow the DRY Principle.

Answer 1

You can use data html attributes to achieve what you are looking for.

And in your js file you can just get those data attributes and validate them as i did in the code below.

var altConcert = [
  "Concert 1",
  "Concert 2",
  "Concert 3",
  "Concert 4",
  "Concert 5",
  "Concert 6"
];

var imgConcert = [
  "https://via.placeholder.com/101/000000",
  "https://via.placeholder.com/102/000000",
  "https://via.placeholder.com/103/000000",
  "https://via.placeholder.com/104/000000",
  "https://via.placeholder.com/105/000000",
  "https://via.placeholder.com/106/000000"
];

var altSport = [
  "Sport 1",
  "Sport 2",
  "Sport 3",
  "Sport 4",
  "Sport 5",
  "Sport 6"
];

var imgSport = [
  "https://via.placeholder.com/101/0000FF",
  "https://via.placeholder.com/102/0000FF",
  "https://via.placeholder.com/103/0000FF",
  "https://via.placeholder.com/104/0000FF",
  "https://via.placeholder.com/105/0000FF",
  "https://via.placeholder.com/106/0000FF"
];

var count = 0;

$(".load-more").click(function() {
    let alt = window[$(this).attr('data-alt')];
  let img = window[$(this).attr('data-img')];
  let target = $(this).attr('data-target');
  //Load the next 3 images
  for (i = 0; i < 3; i++) { 
      
    $(`#${target}`).append(
      '<div">' +
        '<h3>'+alt[count]+'</h3>' +
        '<img src="'+img[count]+'" alt="'+alt[count]+'"/>' +
      '</div>');

    count++;
  }

  //Scroll to the top (+100px) of the newly loaded images
  $('<div id="new-concert-div'+count+'">&nbsp;</div>').appendTo('#extraConcert');
  $('body, html').animate({ scrollTop: $('#new-concert-div'+count+'').offset().top - 100}, 1000);

  //Remove the "View More" button when out of images
  if (count >= imgConcert.length) {
    $(".view-more-concerts").css("display", "none");
    return;
  }
});

#Concerts { float: left; padding-right: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Concerts">    
  <div id="extraConcert">
    <div id="new-concert-div1">&nbsp;</div>
  </div>

  <div class="load-more-concerts load-more" data-alt="altConcert" data-img="imgConcert" data-target="extraConcert">
    <button class="view-more-concerts">View More Concerts</button>
  </div>
</div>


<div id="Sports">
  <div id="extraSports">
    <div id="new-sports-div1">&nbsp;</div>
  </div>

  <div class="load-more-sports load-more" data-alt="altSport" data-img="imgSport" data-target="extraSports">
    <button class="view-more-sports">View More Sports</button>
  </div>
</div>

In my code im getting the data attribute that has been clicked in that case i've used data-target, data-alt and data-img.

• data-target will the target using an id.
• data-alt will be the alt array.
• data-img will be the img array.

In javascript code i've used window to get the variables from the data-* string returned.

It starts to throw undefined when the count is bigger then the array length, but this can made with a validation like if(alt[count] !== undefined).

More information about data attributes can be found here: https://www.w3schools.com/tags/att_data-.asp