jQuery: Problem with function in while loop

This works:
$('#rq1').click(function() {
clearLeadForm();
  $('#leadForm1').html(leadForm);
  $('#leadForm1').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq2').click(function() {
clearLeadForm();
  $('#leadForm2').html(leadForm);
  $('#leadForm2').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq3').click(function() {
clearLeadForm();
  $('#leadForm3').html(leadForm);
  $('#leadForm3').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq4').click(function() {
clearLeadForm();
  $('#leadForm4').html(leadForm);
  $('#leadForm4').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq5').click(function() {
clearLeadForm();
  $('#leadForm5').html(leadForm);
  $('#leadForm5').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq6').click(function() {
clearLeadForm();
  $('#leadForm6').html(leadForm);
  $('#leadForm6').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});
$('#rq7').click(function() {
clearLeadForm();
  $('#leadForm7').html(leadForm);
  $('#leadForm7').animate({height: '360px'}, 900);
  $(this).css( {background: "#fff"})
  return false;
});

Open in new window


But this does not work:
var i = 1;
while (i <8) {
	$('#rq'+i).click(function() {
	clearLeadForm();
	  $('#leadForm'+i).html(leadForm);
	  $('#leadForm'+i).animate({height: '360px'}, 900);
	  $(this).css( {background: "#fff"})
	  return false;
	});
 i++
}

Open in new window


It seems that the value for var i is not being properly passed.
LVL 16
hankknightAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Dushyant SharmaConnect With a Mentor Commented:
I have tested this and it is working fine.
            var i = 1;
            while (i <8) {
                setthis(i);
                i++;
            }
            function setthis(i){
                $('#rq'+i).click(function() {
                    clearLeadForm();
                    $('#leadForm'+i).html(leadForm);
                    $('#leadForm'+i).animate({height: '360px'}, 900);
                    $(this).css( {background: "#fff"})
                    return false;
                });

            }
0
 
cyberkiwiCommented:
That would be because the "$('#leadForm'+i)" is part of the function body, including the +i.
By the time the function runs, i is undefined.

Try this:
var i = 1;
while (i <8) {
	$('#rq'+i).click(function() {
	clearLeadForm();
        var $e = $('#leadForm'+ $(this).id.substr(-1) );
	  $e.html(leadForm);
	  $e.animate({height: '360px'}, 900);
	  $(this).css( {background: "#fff"})
	  return false;
	});
 i++
}

Open in new window

0
 
cyberkiwiConnect With a Mentor Commented:
If this line does not work (haven't had a chance to construct a full page to test)

        var $e = $('#leadForm'+ $(this).id.substr(-1) );

Try these variants:

        var $e = $('#leadForm'+ this.id.substr(-1) );
        var $e = $('#leadForm'+ $(this).attr('id').substr(-1) );
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
kadabaCommented:
Alternatively, you could have a class for the elements with name rq1,rq2 ... as say loadForm i.e class="loadForm" and then you can do as in snippet 1 or as cyberwiki suggested (while still having the class) as in snippet 2.



Code snippet 1:[If the rq1 is in leadForm1, rq2 in leadForm2 and so on...]

$('.loadForm").click(function() {
	clearLeadForm();
	$(this).parents("form").html(leadForm);
	$(this).parents("form").animate({height: '360px'}, 900); 
	$(this).css( {background: "#fff"}) return false; 
}); 

Code snippet 2:

$('.loadForm").click(function() {
	clearLeadForm();
	var $e = $('#leadForm'+ $(this).attr('id').substr(-1) );
	$e.html(leadForm);
	$e.animate({height: '360px'}, 900); 
	$(this).css( {background: "#fff"}) return false; 
});

Open in new window

0
 
Gurvinder Pal SinghCommented:
or you can try this also

var i = 1;
while (i <8) {
      $('#rq'+i).click(function(i) {
      clearLeadForm();
        $('#leadForm'+i).html(leadForm);
        $('#leadForm'+i).animate({height: '360px'}, 900);
        $(this).css( {background: "#fff"})
        return false;
      });
 i++
}
0
 
Gurvinder Pal SinghCommented:
hankknight,
have you tried the solution i have given>?
0
 
Shinesh PremrajanConnect With a Mentor Technical ManagerCommented:
In your code, you are referring to the "this" variable,

$(this).css( {background: "#fff"});

disable this the code should work

Hope this helps
          var i = 1;
            while (i <8) {
                setthis(i);
                i++;
            }
            function setthis(i){
                $('#rq'+i).click(function() {
                    clearLeadForm();
                    $('#leadForm'+i).html(leadForm);
                    $('#leadForm'+i).animate({height: '360px'}, 900);
                    //$(this).css( {background: "#fff"})
                    return false;
                });

            }

Open in new window

0
 
hankknightAuthor Commented:
Thanks
0
All Courses

From novice to tech pro — start learning today.