Question

I have a bunch of different DIVs in a menu that affect different things but they’re all related by a “number”. It works perfectly when I have them all separated but all the For and While loop attempts failed… The hover are applied during a “$(document).ready(function () {});”…

I’m just trying to clean up the code here and change this :

$("#slideMenu1").hover(function () {
  $("#slideMenu1Box").slideToggle("fast");
});

$("#slideMenu2").hover(function () {
  $("#slideMenu2Box").slideToggle("fast");
});

$("#slideMenu3").hover(function () {
  $("#slideMenu3Box").slideToggle("fast");
});

$("#slideMenu4").hover(function () {
  $("#slideMenu4Box").slideToggle("fast");
});

to something like :

for(var i = 1; i < 5; i++) {    
$("#slideMenu"+i).hover(function () {
  $("#slideMenu"+i+"Box").slideToggle("fast");
});
}

but I can’t pull it off. Is it possible? Any idea?

Answer 1

The way i would do it is using class selector or another selector.

 $(".slideMenu").hover(function() {
   $(".slideMenuBox", this).slideToggle("fast")
 });

 .slideMenu{
   display:block;
   height:20px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideMenu1" class="slideMenu">
  <div id="slideMenuBox1" class="slideMenuBox">
    Menu1
  </div>
</div>
<div id="slideMenu2" class="slideMenu">
  <div id="slideMenuBox2" class="slideMenuBox">
    Menu2
  </div>
</div>