Question

I want to cycle through a loop and display the status message every time the user clicks on the box, but right now it’s just doing it once. I know the problem is with the next method, how can I display the status_message until loop execution ends?

http://jsfiddle.net/N8LMF/

HTML

    <input type='textbox' class='' name='change_box'>
    <div class='alert_message'></div>
    <input type='textbox' class='' name='change_box'>
    <div class='alert_message'></div>

Jquery

$(document).ready(function(){
    $('input[name=change_box]').live({
        blur: function(){
            var alert_message= $(this).next('.alert_message');
            for (var i=1; i<5; i++) {
                if(i%2 == 0) {
                    alert_message.removeClass().addClass('failure').text('failed').fadeOut(500);    
                }             
                else {
                    alert_message.removeClass().addClass('success').text('success').fadeOut(500);
                }
            }
        }
    });
});​

Answer 1

The problem is because of removeClass()

This removes all the classes, so you cannot select the div the next time you access it..

Try this if else loop

if (i % 2 == 0) {
         alert_message.show()
                      .removeClass('success')
                      .addClass('failure').text('failed').fadeOut(500);
}
else {             
         alert_message.show()
                      .removeClass('failure')
                      .addClass('success').text('success').fadeOut(500);
}

Check Fiddle