jQuery Creating Function in a loop

Question

I have the following code:

    $('.edu2').click(function() {
        $('.edusub2').toggle().delay( 2000 );
    });
    $('.edu3').click(function() {
        $('.edusub3').toggle().delay( 2000 );
    });
    $('.edu4').click(function() {
        $('.edusub4').toggle().delay( 2000 );
    });
    $('.edu5').click(function() {
        $('.edusub5').toggle().delay( 2000 );
    });
    $('.edu6').click(function() {
        $('.edusub6').toggle().delay( 2000 );
    });

Instead of having six different functions, is it possible to create them in a single function, i.e. a loop:

I have tried the following:

    for (i = 2; i <= 6; i++) {
        $('.edu'+i).click(function() {
            $('.edusub'+i).toggle().delay( 2000 );
        });
    }

HTML

<tr class='td1 noborder pointer education'><td  style='padding-left:10px'><b> + </b>ISCS</td>
<td style='text-align:center;'>0</td><tr class='td1 noborder pointer edu2'>
<td  style='padding-left:20px;background-color:#CCC;'><b> + </b>Cis</td>
<td style='text-align:center;background-color:#CCC;'>0</td>
<tr class='td1 noborder edusub2'>
<td  style='padding-left:30px;background-color:#DDD;'><b> - </b>DM 5</td>
<td style='text-align:center;background-color:#DDD;'>0</td>
<tr class='td1 noborder pointer edu3'>
<td  style='padding-left:20px;background-color:#CCC;'><b> + </b>CRF</td>
<td style='text-align:center;background-color:#CCC;'>0</td>
<tr class='td1 noborder edusub3'>

etc.

But no joy. Any suggestions welcomed.

What's your HTML look like? You can probably forgo the loop altogether and just write a single function. — j08691
– j08691, Commented Oct 7, 2015 at 15:40
Nice thanks @j08691! ;-) I'll add to my post if it helps but basically, this is being used to show and hide table rows depending on what the user selects. — Homer_J
– Homer_J, Commented Oct 7, 2015 at 15:42
@j08691 - that's what I was thinking but am struggling to work out how.... — Homer_J
– Homer_J, Commented Oct 7, 2015 at 15:50

Richard Hamilton · Accepted Answer · 2015-10-07 15:57:08Z

2

It turns out that using a for loop is not the optimal solution here. This is because the value of the index variable gets incremented. It's better to use jQuery's each function. Here is an example.

$("button").each(function() {
    $(this).on("click", function() {
        $(".edusub" + ($(this).index() + 2)).toggle();
    });
});

http://jsfiddle.net/by6pu11k/1/

Disclaimer: I do not know what your code looks like but I do know you mentioned table rows. I tried to create this example based on the information you gave us. For this example, I created 5 buttons with the .edu class and 5 table rows.

edited Oct 7, 2015 at 15:57

answered Oct 7, 2015 at 15:41

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

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

2 Comments

Richard Hamilton Over a year ago

This is now working for the jsfiddle, but not sure it will work for your project.

Homer_J Over a year ago

Thanks Richard, have uploaded some HTML now if that helps - will review the jsfiddle now.

PeterKA · Accepted Answer · 2015-10-07 16:45:55Z

1

You can easily achieve this with a little planning by (1) giving the elements a common class, say edu and (2) adding a data-attribute, say data-target, to each element that will hold the target element. Then you code would look something like:

$('.edu').click(function() {
    var target = $(this).data('target');
    $(target).toggle().delay( 2000 );
});

Sample html

.... class="edu1 edu" data-target=".edusub1" ....

edited Oct 7, 2015 at 16:45

answered Oct 7, 2015 at 15:50

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

jQuery Creating Function in a loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related