Javascript document.ready函数中有多个函数

这是我的密码：

$(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");
    });
});

---

我想使用.flip作为变量（flipVar）和.panel作为变量（panelVar）

创建一个循环。如果是我的页面，我会确保这些元素都共享一个类，这样我就不需要循环。但是，您可以这样做：

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

for（var i=1；i
$（文档）.ready（函数（）{
对于（var i=1；i尝试以下方法：

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

$（函数（）{
对于（var i=1；i即使您希望在循环中运行选择器，我也不会这样做，因为您正在执行多个DOM选择。您可以通过一个DOM选择来完成：

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

假设
翻转
元素以数字顺序出现在页面上，这将起作用

这用于获取类名以
“flip”
开头的所有
元素。如果标记名不同，请更改标记名，如果它们没有相同的标记，请删除标记名

它使用
.each（）的
索引
提供给您，以便切换正确的
。面板
我必须在javascript中查找生成类。生成一个类是否适用于未知数量的元素？菜单和子菜单是从数据库创建的，可以是任意大小，具体取决于用户输入的内容。不，该类将基于元素，只是因为“flip1”已经在元素类中了。很好的观点是，将所有元素都设置为单个类（flip）如果在页面上有很多元素需要切换，那么肯定会节省大量的处理和遍历…或者，如果完全必要，尝试给这些元素一个ID而不是类-对于jQuerylet me来说，查找ID要比查找元素的类快得多。另外，元素的数量未知，范围也不是必需的来自flip1-flip4的y。这不起作用，因为
单击
处理程序中的
i
引用值将始终反映最新的更新。在这种情况下可能是
5
。噢，感谢您指出@patrick。我没有测试过这一点。我错过了
。全部单击
：（愚蠢的我！你差一点就成功了。只是需要一个闭包来保留
$（'.panel'+i）的
i
的值）
@patrick请编辑答案，让我知道如何操作。我对闭包很弱。也许会像@fcalderan的答案一样，这不仅是最好的方法，而且取决于HTML，可以通过执行类似
$（this.find（'div[class^=panel]）的操作来简化。slideToggle（'slow'））
而且您甚至不需要索引：）@Jason:+1这是一个很好的观点。很可能在处理程序内部使用某种方式的遍历，而不是DOM选择。因此我使用它作为快速“绷带”解决我的问题，直到我找到javascript类。它解决了。我有一个计数来跟踪我的元素，并用这个计数替换了4。谢谢！
$(function(){
    for(var i=1;i<5;i++){
         $('.flip'+i).click(function () {
             $('.panel'+i).slideToggle("slow");
         });
    }
});

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