CODEWITHSUNDEEP
javascriptloops
MikeC
MikeC

Reputation: 21

What's a better way to consolidate code in a loop?

How do I consolidate the following code in a loop? My goal is to repeat the classes .node and .visual-content with a consecutive number at the end of the class.

$s(".node1").hover(function () {
$s(".visual-content1").fadeIn("slow");
 $s(".visual-content2").fadeOut();
 $s(".visual-content3").fadeOut();
 $s(".visual-content4").fadeOut();
 $s(".visual-content5").fadeOut();
 $s(".visual-content6").fadeOut();
 $s(".visual-content7").fadeOut();
 $s(".visual-content8").fadeOut();
 $s(".visual-content9").fadeOut();
 $s(".visual-content10").fadeOut();
});

$s(".node2").hover(function () {
$s(".visual-content2").fadeIn();
 $s(".visual-content1").fadeOut();
 $s(".visual-content3").fadeOut();
 $s(".visual-content4").fadeOut();
 $s(".visual-content5").fadeOut();
 $s(".visual-content6").fadeOut();
 $s(".visual-content7").fadeOut();
 $s(".visual-content8").fadeOut();
 $s(".visual-content9").fadeOut();
 $s(".visual-content10").fadeOut();
});

Upvotes: 1

Views: 123

Answers (2)

epascarello
epascarello

Reputation: 207511

Use classes and data attributes and ignore all the copy paste code.

$(".node").on("mouseenter", function () {
  var toggles = $(this).data('toggles')
  $('.content').not(toggles).fadeOut()
  $(toggles).fadeIn()
})
.content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="node" data-toggles="#content1">One</li>
  <li class="node" data-toggles="#content2">Two</li>
  <li class="node" data-toggles="#content3">Three</li>
</ul>

<div id="content1" class="content">One Content</div>
<div id="content2" class="content">Two Content</div>
<div id="content3" class="content">Three Content</div>

Upvotes: 1

Sandy
Sandy

Reputation: 127

Basically you do two loops: An outer loop for the .nodes, and an inner loop for the visual contents. That would work like this:

for(let i = 1; i <= 10; i++){
    $s(".node"+i).hover(function(){
    $s(".visual-content"+i).fadeIn("slow");
    for(let j = 1; j <= 10; j++){
        if(j != i){
        $s(".visual-content"+j).fadeOut();
      }
    }
  });
}

Although the comments are right, you might want to check if there's a better solution.

Upvotes: 1

Related Questions