document.ready函数中的多个函数

Question

here's my code:

$(document).ready(function () {

    $('.flip1').click(function () {
        $('.panel1').slideToggle("slow");
    });
    $('.flip2').click(function () {
        $('.panel2').slideToggle("slow");
    });
    $('.flip3').click(function () {
        $('.panel3').slideToggle("slow");
    });
    $('.flip4').click(function () {
        $('.panel4').slideToggle("slow");
    });
});

I want to make a loop with .flip as the variable (flipVar) and .panel as (panelVar)

Answer 1

Well if it were my page I'd make sure that those elements all shared a class so that I wouldn't need to loop. However, you could do this:

 for (var i = 1; i <= 4; ++i) $('.flip' + i).click((function(i) {
   return function() { $('.panel' + i).slideToggle('slow'); };
 })(i));

The loop variable has to be trapped in a closure so that each "click" handler references the proper value. Again, I really wouldn't do it this way. I'd make the "flip" elements share a class, and then keep that index (the implicit reference to a corresponding "panel") in a separate class element or in a "data-" attribute. Then the handler could find the panel using that value.

edit — as a hack, you could leverage the fact that the class names of the related elements are both of the form "somethingNN", where "NN" is the numeric part. You could strip off the number and then append it to "panel":

for (var i = 1; i <= 4; ++i) $('.flip' + i).click(function() {
  var panelClass = this.className.replace(/.*\bflip(\d+).*/, "panel$1");
  $(panelClass).slideToggle('slow');
});

Answer 2

Even though you want to run the selector in a loop, I wouldn't do it like that because you're doing multiple DOM selections. You can get it done with one DOM selection:

$(document).ready(function () {
    $('div[class^=flip]').each(function ( idx ) {
        $(this).click(function() {
            $('.panel' + (idx + 1)).slideToggle("slow");
        });
    });
});

This will work assuming that the flip elements occur on the page in their numerical order.

This uses the attribute starts with selector to get all <div> elements that have a class name starting with "flip" . Change the tag name if it is different, or remove it if they don't all have the same tag.

It uses the index that .each() makes available to you in order to toggle the correct .panel .

Answer 3

$(document).ready(function () {

    for (var i=1; i<=4; i++) {
       (function(i) {
          $('.flip'+i).click(function () {
             $('.panel'+i).slideToggle("slow");
          });
       })(i);
    }

}); 

Answer 4

try this:

$(function(){
    for(var i=1;i<5;i++){
         $('.flip'+i).click(function () {
             $('.panel'+i).slideToggle("slow");
         });
    }
});

PS:- don't use this it will not work as pointed out by @patrick