hankknight
asked on
jQuery: Problem with function in while loop
This works:
But this does not work:
It seems that the value for var i is not being properly passed.
$('#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;
});
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++
}
It seems that the value for var i is not being properly passed.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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;
});
or you can try this also
var i = 1;
while (i <8) {
$('#rq'+i).click(function( i) {
clearLeadForm();
$('#leadForm'+i).html(lead Form);
$('#leadForm'+i).animate({ height: '360px'}, 900);
$(this).css( {background: "#fff"})
return false;
});
i++
}
var i = 1;
while (i <8) {
$('#rq'+i).click(function(
clearLeadForm();
$('#leadForm'+i).html(lead
$('#leadForm'+i).animate({
$(this).css( {background: "#fff"})
return false;
});
i++
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hankknight,
have you tried the solution i have given>?
have you tried the solution i have given>?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks
By the time the function runs, i is undefined.
Try this:
Open in new window