循環8次

Question

我如何用這個函數做8次循環？

只有改變要被執行的固定次數都十分For循環完成了varñ

$(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

這是一個完整的代碼示例，它包含了我的兩個答案。

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 2

循環。 W3C for loop reference

這將是這個樣子......

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

Answer 3

$(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 4

將您的代碼移動到一個單獨的函數，該函數將n作爲參數，然後在循環中調用該函數。

您可能遇到的問題是嵌套函數在每次定義時都使用相同的n。因此，n將在所有的處理程序中爲8。通過將嵌套函數移動到單獨的函數中，可以爲每個函數創建一個不同的閉包，從而解決問題。

有關更詳細的解釋，請參見this answer。

Answer 5

你有沒有想過爲什麼你需要一個循環？也許不是使用id選擇器，你可以使用類選擇器一次選擇一組元素。

<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 6

順便說一句，而不是增加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。