How to loop a JQuery function on different HTML elements

Question

Okay so I am trying to create a slide transition when the user hovers on a certain box. I have the function down, but I am wondering is there a way to loop through various different boxes instead of creating a copied function and class with every new slide transition box.

//Slide Function-- Start (below)--- 
$("#slide_1").hover(function(){
    $("#slideimg1").slideDown("slow");
},
function(){
    $("#slideimg1").slideUp("slow");
});   
//Slide Function--End (above)---
//Slide Function---Start (below) --- 
$("#slide_2").hover(function(){
    $("#slideimg2").slideDown("slow");
},
function(){
    $("#slideimg2").slideUp("slow");
});
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_3").hover(function(){
    $("#slideimg3").slideDown("slow");
},
function(){
    $("#slideimg3").slideUp("slow");
});
//Slide Function---End (above) ---  
//Slide Function---Start (below) --- 
$("#slide_4").hover(function(){
    $("#slideimg4").slideDown("slow");
},
function(){
    $("#slideimg4").slideUp("slow");
});
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_5").hover(function(){
    $("#slideimg5").slideDown("slow");
},
function(){
    $("#slideimg5").slideUp("slow");
});
//Slide Function---End (above) ---  
//Slide Function---Start (below) --- 
$("#slide_6").hover(function(){
    $("#slideimg6").slideDown("slow");
},
function(){
    $("#slideimg6").slideUp("slow");
});
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_7").hover(function(){
    $("#slideimg7").slideDown("slow");
},
function(){
    $("#slideimg7").slideUp("slow");
});
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_8").hover(function(){
    $("#slideimg8").slideDown("slow");
},
function(){
    $("#slideimg8").slideUp("slow");
});
//Slide Function---End (above) ---

So instead of writing a new slidimg(n) where n is a number, and a new slide_n where n is a number, is there a way to create a function that will loop somehow.

Sorry if this isn't very straightforward. Pretty new to this type of stuff.

Answer 1

Avoid using # id selector.

Create a specific class or attribute for these components and attach the event handler using the jQuery selector concept rather than creating multiple functions for dynamically created elements.

Take a look at the .on() event handler attachment which will let you attach event handlers to dynamically added elements if the selector is matched.

---

EDIT: Including code snippet for more clarification

Here is a small example on how to avoid looping:

As seen below, we are using class selector to find the family of slides and then attaching an handler to it; Here, we don't have to attach the handler to specific slides using #id selector, as we are selecting them based on their family OR in other words using class (.className) selector.

Though each slide has an id we are not using it as the behavior we are trying to accomplish is the same; but if we want one slide to behave differently, we can use it's id (or even we can set attributes to it) to derive uniqueness (and make it behave in a different way based on it's attribute / ID).

/* Using `hover` */

$(".slide").hover(function() {
    $(this).find("img").slideDown("slow");
  },
  function() {
    $(this).find("img").slideUp("slow");
  });


/* Using `on` ; Comment the above and un-comment the below to see the same effect */

/*
$(".slide").on({
  mouseenter: function() {
    $(this).find('img').slideDown('slow');
  },
  mouseleave: function() {
    $(this).find("img").slideUp("slow");
  }
});
*/

.slides {
  padding: 10px;
}
.slides > div {
  padding: 10px;
  margin: 40px 0;
  border: 1px solid #dddddd;
  border-radius: 10px;
}
.slides img {
  width: 200px;
  height: 200px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div class="slides">

  <div id="slide_1" class="slide">
    <span>University of Oxford</span>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Oxfordceremony.jpg" alt="Degree Ceremony at University of Oxford" />
  </div>

  <div id="slide_2" class="slide">
    <span>The University of Bologna</span>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Bologna-vista02.jpg/300px-Bologna-vista02.jpg" alt="The University of Bologna" />
  </div>

  <div id="slide_3" class="slide">
    <span>Heidelberg University</span>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Heidelberg_Universit%C3%A4tsbibliothek_2003.jpg/220px-Heidelberg_Universit%C3%A4tsbibliothek_2003.jpg" alt="Heidelberg University" />
  </div>

  <div id="slide_4" class="slide">
    <span>King's College London</span>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Strand102.jpg/220px-Strand102.jpg" alt="King's College London" />
  </div>

</div>