How can I have a function accept multiple file types?

Question

How can I have a function accept multiple file types such as .jpg, .png, and .gif? Example of the intended file structure:

• img/slides/

  • randomImage-0.jpg
  • randomImage-1.png
  • randomImage-2.gif

    var imageType = ".jpg";
    
    $.each($("#modal .slide"), function(index, value) {
      $(this).css({
        background:
          "url('img/slides/" +
          id +
          "-" +
          index +
          imageType +
          "') center center/cover",
        backgroundSize: "cover"
      });
    });

  <div id=gallery>
   <div class="card"></div>
     <div class="text">
       <div class="bold">Profile</div>
     </div>
  <div class="button" id="randomImage">LEARN MORE</div> // Open modal on click

  <div id="modal">
    <div id="carousel">
      <div class="slide"></div>
      <div class="slide"></div>
      <div class="slide"></div>
    </div>
  </div>

Answer 1

You can use an Array.

var imageTypes = [
  "jpg",
  "png",
  "gif"
];
var id = "profilePic";

$.each($("#modal .slide"), function(index, value) {
  $(this).css({
    background: "url('img/slides/" + id + "-" + index + "." + imageTypes[index] + "') center center/cover",
    backgroundSize: "cover"
  });
});