How to create a loop using jQuery

Question

I want to execute the below code by creating a simple loop using jQuery, I can also change the classes if needed.

I want to shrink the code as much as possible.

     $( ".btn1" ).click(function() {
     $( this ).toggleClass( "act-btn1" );
     });
     $( ".btn2" ).click(function() {
     $( this ).toggleClass( "act-btn2" );
     });
     $( ".btn3" ).click(function() {
     $( this ).toggleClass( "act-btn3" );
     });
     $( ".btn4" ).click(function() {
     $( this ).toggleClass( "act-btn4" );
     });
     $( ".btn5" ).click(function() {
     $( this ).toggleClass( "act-btn5" );
     });
     $( ".btn6" ).click(function() {
     $( this ).toggleClass( "act-btn6" );
     });
     $( ".btn7" ).click(function() {
     $( this ).toggleClass( "act-btn7" );
     });
     $( ".btn8" ).click(function() {
     $( this ).toggleClass( "act-btn8" );
     });
     $( ".btn9" ).click(function() {
     $( this ).toggleClass( "act-btn9" );
     });
     $( ".btn10" ).click(function() {
     $( this ).toggleClass( "act-btn10" );
     });
     $( ".btn11" ).click(function() {
     $( this ).toggleClass( "act-btn11" );
     });
     $( ".btn12" ).click(function() {
     $( this ).toggleClass( "act-btn12" );
     });

Another way of tackling this is to give each item two identifiers - .btn for all of them, and then #btn1 (with a number) for each one. You can then just attach a click handler to $('.btn') and then read the id from inside the handler. — halfer
– halfer, Commented Jun 9, 2020 at 11:47

Nick · Accepted Answer · 2020-06-09 06:34:31Z

3

for (let i = 0; i <= 12; i++) {
  $( ".btn" + i ).click(function() {
    $( this ).toggleClass( "act-btn" + i );
  });
}

answered Jun 9, 2020 at 6:34

Nick

4612 silver badges10 bronze badges

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

Comments

BadPiggie · Accepted Answer · 2020-06-09 06:34:50Z

1

I don't know about your logic, And number of elements is dynamic or static. Anyway using simple loop like below may solve your problem.

    for(let i = 1; i < 13; i++) {
        $(`.btn${i}`).click(function() {
          $(this).toggleClass(`act-btn${i}`);
        });
    }

answered Jun 9, 2020 at 6:34

BadPiggie

6,4391 gold badge17 silver badges37 bronze badges

Comments

Tim567 · Accepted Answer · 2020-06-09 06:36:44Z

0

The best way to do this would be to make a general class like .button and add it to every button, thun also make a general action class .btn-action, it would look somthing like this:

$('.button').on('click', function(){
    $(this).toggleClass('btn-action');
})

answered Jun 9, 2020 at 6:36

Tim567

8151 gold badge7 silver badges24 bronze badges

1 Comment

halfer Over a year ago

@UjjawalPoonia: this will work, and is a more efficient way to use jQuery. You would need to modify your HTML. Presently your code appears to be specifying unique identifiers in class names, but they should really be IDs.

Collectives™ on Stack Overflow

How to create a loop using jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related