generating multiple on click event using javascript

Question

Hi i am trying to that a program that generate multiple click events with different ids depending on n-term. where n for now is 4,but it does not loop

here is my code

        for (var i=1 ;i<= 4;i++){       
            $('#rl+i').click( function () {
                $("#div"+i).fadeIn();
                $("#outer").fadeOut();

            });
      }

my goal is to generate the below output if it is possible

            $('#rl1').click( function () {
                $("#div2").fadeIn();
                $("#outer").fadeOut();

            });

            $('#rl2').click( function () {
                $("#div2").fadeIn();
                $("#outer").fadeOut();

            });
                $('#rl3').click( function () {
                $("#div3").fadeIn();
                $("#outer").fadeOut();

            });
                $('#rl4').click( function () {
                $("#div4").fadeIn();
                $("#outer").fadeOut();

            });

Actually you likely want `$('.rl').on("click",function () { var idx=this.id.replace('rl',''); $("#div"+idx).fadeIn(); $("#outer").fadeOut(); });` and give your rl's the class of `rl` — mplungjan, May 16 '15 at 17:52

score 0 · Answer 1 · answered May 16 '15 at 17:47

0

Try this:

for (var i = 1; i <= 4; i++) {
    $('#rl' + i ).click(function() {
        $("#div" + i).fadeIn();
        $("#outer").fadeOut();
    });
}

answered May 16 '15 at 17:47

Kresimir Pendic

3,597
1
21
28

score 0 · Accepted Answer · answered May 16 '15 at 17:47

You are on the right track. Just modify the selector in the for loop to be

$('#rl'+i).click( function () {....

So the complete for loop is

   for (var i=1 ;i<= 4;i++){       
            $('#rl'+i).click( function () {
                $("#div"+i).fadeIn();
                $("#outer").fadeOut();

            });
      }

generating multiple on click event using javascript

2 Answers2