使用jQuery和JavaScript进行循环

Question

I'm trying to do a simple for loop in JavaScript/jQuery every time I click NEXT, I want the I to increment once.

But it is not working. When I press next, nothing happens.

<script>

//function to show form
function show_form_field(product_field){
    $(product_field).show("slow");
}
$(document).ready(function(){
    //start increment with 0, until it is reach 5, and increment by 1
    for (var i=0; i < 5 ;i++)
    {
        //when I click next field, run this function
        $("#next_field").click(function(){
            // fields are equial to field with id that are incrementing
            var fields_box = '#field_'+[i];
            show_form_field(fields_box)

        })
    }
});

</script>

Answer 1

You should declare variable i document wide, not inside the click handler.

//function to show form
function show_form_field(product_field){
    $(product_field).show("slow");
}
$(document).ready(function(){
   var i=0;

        $("#next_field").click(function(){

            var fields_box = '#field_'+ i++ ;
            show_form_field(fields_box)

        })

});

Answer 2

You do not need the for loop. Just declare var i outside click function and increment it inside the function.

//function to show form
function show_form_field(product_field) {
    $(product_field).show("slow");
}

$(document).ready(function () {

    var i = 0; // declaring i
    $("#next_field").click(function () {

        if (i <= 5) { // Checking whether i has reached value 5
            var fields_box = '#field_' + i;
            show_form_field(fields_box);
            i++; // incrementing value of i
        }else{
            return false; // do what you want if i has reached 5
        }

    });

});

Answer 3

Call $("#next_field").click just one time, and in the click function, increase i every time.

$(document).ready(function() {

    var i = 0;

    $("#next_field").click(function() {

        if (i >= 5) {
            //the last one, no more next
            return;
        }

        show_form_field('#field_' + (i++));
    });

});

Answer 4

try this

$(document).ready(function(){
    //start increment with 0, untill it is reach 5, and increment by 1
   var i = 0;
    $("#next_field").click(function(){
            // fields are equial to field with id that are incrementing
            if(i<5)
            {
              var fields_box = '#field_'+i;
              show_form_field(fields_box);
              i+=1;
            }
            else
            {
              return;
            }

        });

});