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.

Can you show add your html in order to guide you on the right way to select elements with a global function — DaniP
– DaniP, Commented Sep 21, 2016 at 21:51

jl_ · Accepted Answer · 2016-09-27 18:00:32Z

4

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>

edited Sep 27, 2016 at 18:00

answered Sep 21, 2016 at 21:47

jl_

5,5993 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

UhhHoney Over a year ago

Is there a way to somehow derive some uniqueness between each class element? So they are all part of the same CSS class, but each hover only toggles down a particular element in that class instead of all elements. Is this what on() would do?

jl_ Over a year ago

If slide_1, slide_2 .. slide_n are going to use the same functionality, it is good to group them into a family (a class for example). Each member in that family can have different attributes though and is possible to have different visualizations.Could you please also put the mark-up (or an image) so that it can be better visualized to solution?

Spencer Wieczorek Over a year ago

You should not be avoiding the id selector per say. Rather not be using id's on things that are better suited as classes.

Collectives™ on Stack Overflow

How to loop a JQuery function on different HTML elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related