Петлю с 8 раз

Question

Как мне сделать цикл с 8 раз с этой всей функцией?

Только изменение переменной n

$(document).ready(function(){
    var n=2;                                   
    $forms = $('#form'+n);
    $('#toogle'+n).hide();
    $('#hide'+n).hide();

$('a').bind('click', function(){
        switch(this.id){
            case 'c'+n:
                $('#change'+n).hide();
                $('#phone'+n).hide();
                $('#hide'+n).show();
                $('#toogle'+n).show(); 
                return false;
                break;
             case 'd'+n:
                $('#change'+n).show();
                $('#phone'+n).show();
                $('#hide'+n).hide();
                $('#toogle'+n).hide(); 
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){
        var $button = $('button',this).attr('disabled',true);
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({
            type: 'POST',
            url: this.action,
            data: params,

        beforeSend: function(){
                $('#phone'+n).show();
                $('#hide'+n).hide();

                $('#phone'+n).html("Loading...");
            },
            success: function(txt){

                $('#top'+n).show();
                $('#cadastro'+n).hide   ();
                $('#hide'+n).hide   ();
                $('#toogle'+n).hide();
                $('#change'+n).show();

                $button.attr('disabled',false);

                $('#phone'+n).html(txt);

                self.reset();
            },

            error: function(txt){
                $('#phone'+n).html(txt);
            }
        })
        return false;
    });

});

Answer 1

Переместите ваш код в отдельную функцию, которая принимает n в качестве параметра, затем вызовите эту функцию в цикле.

Проблема, с которой вы, вероятно, столкнулись, заключается в том, что вложенные функции используют один и тот же n каждый раз, когда они определены. Следовательно, n будет 8 во всех обработчиках. Перемещая вложенные функции в отдельную функцию, вы создаете разные замыкания для каждой, решая проблему.

Более подробное объяснение см. в этом ответе .

Answer 2

Вот полный пример кода, который включает оба моих ответа.

function handleForm(n) {
    $forms = $('#form'+n);
    $('#toogle'+n).hide();
    $('#hide'+n).hide();

    $('a#c' + n).click(function() {
        $('#change'+n).hide();
        $('#phone'+n).hide();
        $('#hide'+n).show();
        $('#toogle'+n).show();

        return false;
    });
    $('a#d' + n).click(function() {
        $('#change'+n).show();
        $('#phone'+n).show();
        $('#hide'+n).hide();
        $('#toogle'+n).hide(); 

        return false;
    });



    $forms.bind('submit', function(){
        var $button = $('button',this).attr('disabled',true);
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({
            type: 'POST',
            url: this.action,
            data: params,

            beforeSend: function(){
                $('#phone'+n).show();
                $('#hide'+n).hide();

                $('#phone'+n).html("Loading...");
            },
            success: function(txt){

                $('#top'+n).show();
                $('#cadastro'+n).hide   ();
                $('#hide'+n).hide       ();
                $('#toogle'+n).hide();
                $('#change'+n).show();

                $button.attr('disabled',false);

                $('#phone'+n).html(txt);

                self.reset();
            },

            error: function(txt){
                $('#phone'+n).html(txt);
            }
        });
        return false;
    });
}

for (n = 2; n < 10; n++) {
    handleForm(n);
}

Answer 3

Кроме того, вместо добавления 8 обработчиков кликов к каждой ссылке в документе, вы можете сделать что-то вроде этого:

$('a#c' + n).click(function() {
    $('#change'+n).hide();
    $('#phone'+n).hide();
    $('#hide'+n).show();
    $('#toogle'+n).show();

    return false;
});
$('a#d' + n).click(function() {
    $('#change'+n).show();
    $('#phone'+n).show();
    $('#hide'+n).hide();
    $('#toogle'+n).hide(); 

    return false;
});

Кроме того, вы ошиблись toggle.

Answer 4

Задумывались ли вы, зачем вам петля? Возможно, вместо использования селектора идентификаторов, вы можете использовать селектор классов, чтобы выбрать сразу несколько элементов.

<div id="div1" class="thumbnail"></div>
<div id="div2" class="thumbnail"></div>
<div id="div3" class="thumbnail"></div>

jQuery(".thumbnail").doStuff(); //will apply for all 3 divs.

Answer 5

$(document).ready(function(){
    var n = 2;
    for(n = 2; n < 11; n++) {                                                           
    $forms = $('#form'+n);
    $('#toogle'+n).hide();
    $('#hide'+n).hide();

$('a').bind('click', function(){
        switch(this.id){
            case 'c'+n:
                        $('#change'+n).hide();
                        $('#phone'+n).hide();
                        $('#hide'+n).show();
                $('#toogle'+n).show(); 
                return false;
                break;
                 case 'd'+n:
                        $('#change'+n).show();
                        $('#phone'+n).show();
                        $('#hide'+n).hide();
                $('#toogle'+n).hide(); 
                return false;
                break;
        }
    })

    $forms.bind('submit', function(){
        var $button = $('button',this).attr('disabled',true);
        var params = $(this.elements).serialize();

        var self = this;
        $.ajax({
            type: 'POST',
            url: this.action,
            data: params,

        beforeSend: function(){
                $('#phone'+n).show();
                        $('#hide'+n).hide();

                $('#phone'+n).html("Loading...");
            },
            success: function(txt){

                        $('#top'+n).show();
                $('#cadastro'+n).hide   ();
                        $('#hide'+n).hide       ();
                        $('#toogle'+n).hide();
                        $('#change'+n).show();

                        $button.attr('disabled',false);

                $('#phone'+n).html(txt);

                self.reset();
            },

            error: function(txt){
                $('#phone'+n).html(txt);
            }
        })
        return false;
    });
  }   
});

Это был бы самый простой способ, но я бы порекомендовал добавить все ваши элементы в DOM в один цикл for и использовать селекторы, чтобы позаботиться об остальной части кода.

Answer 6

Циклы, которые должны выполняться фиксированное количество раз, очень хорошо сделаны с помощью цикла For. W3C для задания контура

Это будет выглядеть примерно так ...

for (n = 2; n < 10; n++) {
    // your code with 'n' in it here...
}