JS Jquery repeating a function

Question

I have a simple toggle function that I want to repeat 20+ times, is there a more elegant way of writing this without copy and pasting the same function and changing the numbers over and over?

$(document).ready(function(){ 
$( ".p1" ).click(function() {
    $( ".c1" ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
});

$( ".p2" ).click(function() {
    $( ".c2" ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
});

$( ".p3" ).click(function() {
    $( ".c3" ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
});
});

HTML for more context:

<div class="group">
 <div class="p1"></div>
 <div class="p2"></div>
 <div class="p3"></div>

 <div class="c1"></div>
 <div class="c2"></div>
 <div class="c3"></div>
</div>

<div class="group">
 <div class="p4"></div>
 <div class="p5"></div>
 <div class="p6"></div>

 <div class="c4"></div>
 <div class="c5"></div>
 <div class="c6"></div>
</div>

This is for a profile page, when you click p1, then c1 opens, p2 then c2 opens, etc. I'm controlling the transitions with CSS

The solutions below worked but I've hit another issue. When p1, p2, etc is open all the other p's need to fadeout. Toggle seems to be creating some inconsistencies.

There is most likely a way to do this without ugly loops, as found in the answers below, but how you structure the DOM traversal logic would depend on the HTML. Could you edit the question to include a sample of it? — Rory McCrossan
– Rory McCrossan, Commented Feb 14, 2021 at 13:17
Give us some more context about how the ".p" classes and ".c" classes are structured in the DOM. Depending on this structure more efficient solution can be used. — Vlad Solomon
– Vlad Solomon, Commented Feb 14, 2021 at 15:57

Ahmed Hammad · Accepted Answer · 2021-02-14 13:04:02Z

2

I guess a simple for-loop would do it!

for (let i = 1; i < 20; i++) {
  $( ".p" + i ).click(function() {
     $( ".c" + i ).toggleClass("open");
     $( ".person" ).toggleClass("fadeout");
     $(this).removeClass('fadeout');
  });
}

edited Feb 14, 2021 at 13:04

answered Feb 14, 2021 at 12:56

Ahmed Hammad

3,1255 gold badges22 silver badges43 bronze badges

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

1 Comment

The Bomb Squad Over a year ago

you did it first.. you should get the marks for it

Frenchy · Accepted Answer · 2021-02-14 12:56:37Z

0

without html code, you could write a loop:

for(var i=1;i < 20; i++){
  $( ".p" + i ).click(function() {
    $( ".c" +i ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
  });
}

answered Feb 14, 2021 at 12:56

Frenchy

17.1k3 gold badges21 silver badges42 bronze badges

Comments

Truc Nguyen · Accepted Answer · 2021-02-14 13:07:49Z

0

Try this one

$(document).ready(function() { 
 for(let i = 1; i <= 20; i ++) {
    $( ".p" + i ).click(function() {
       $( ".c" + i ).toggleClass("open");
       $( ".person" ).toggleClass("fadeout");
       $(this).removeClass('fadeout');
    });
  }
});

edited Feb 14, 2021 at 13:07

answered Feb 14, 2021 at 12:58

Truc Nguyen

197 bronze badges

Collectives™ on Stack Overflow

JS Jquery repeating a function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related