Link to home
Start Free TrialLog in
Avatar of hankknight
hankknightFlag for Canada

asked on

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.
Avatar of cyberkiwi
cyberkiwi
Flag of New Zealand image

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

SOLUTION
Avatar of cyberkiwi
cyberkiwi
Flag of New Zealand image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

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++
}
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
hankknight,
have you tried the solution i have given>?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of hankknight

ASKER

Thanks