Javascript Can'；无法使递归fadeIn、切换、显示正常工作

我正在尝试使递归的

fadeIn

、

show

或

toggle

函数正常工作，我看不出错误在哪里

HTML:

<table id="myTable"></table>​

$(function () {
    var showMenu = function (i, callback) {
            if (i > 10) {
                //stop
                return;
            } else {
                $('#myTable').append('<tr id="method_1' + i + '" style="display: none;"><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_' + i + '" id="id_1_' + i + '">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>');
                $('#method_1' + i).fadeIn('1000', showMenu(i + 1, showMenu));
            }
        }
    showMenu(2, showMenu);
})

​

JavaScript:

<table id="myTable"></table>​

$(function () {
    var showMenu = function (i, callback) {
            if (i > 10) {
                //stop
                return;
            } else {
                $('#myTable').append('<tr id="method_1' + i + '" style="display: none;"><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_' + i + '" id="id_1_' + i + '">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>');
                $('#method_1' + i).fadeIn('1000', showMenu(i + 1, showMenu));
            }
        }
    showMenu(2, showMenu);
})

$（函数（）{
var showMenu=函数（i，回调）{
如果（i>10）{
//停止
返回；
}否则{
$（'#myTable'）.append（'CMethod（CAM）：2-canopy 9-canop'）；
$（'u#method_1'+i）.fadeIn（'1000'，showMenu（i+1，showMenu））；
}
}
showMenu（2，showMenu）；
})

问题是回调中没有调用效果，而是一次调用所有效果

---

在fadeIn回调中，您必须提供函数，而不是函数调用（您正在执行的操作）。我建议：

$('#method_1'+i).fadeIn('1000', function () {
    showMenu(i+1,showMenu);
});

我认为应该这样做

---

这里有一个jsFiddle演示了我的更改：

这是因为您不提供对

fadeIn

的回调，而是立即再次调用

showMenu

（甚至在

.fadeIn（）

之前）

通过实际提供要调用的函数而不是当场调用函数来解决此问题：

 $('#method_1'+i).fadeIn('1000',function() { showMenu(i+1,showMenu) });

.

试试：

$(function(){

    var menu = (function(i){
         var $this =  {
             show: function(){
                  if(i++ > 10) return;
 $('#myTable').append('<tr id="method_1'+i+'" style="display: none;"><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>');


                  $('#method_1'+i).fadeIn('1000',$this.show); 

             }
         }
             return $this;
    });

    menu(0).show();

});​

$（函数（）{
变量菜单=（函数（i）{
var$this={
show:function（）{
如果（i++>10）返回；
$（'#myTable'）.append（'CMethod（CAM）：2-canopy 9-canop'）；
$（'u#method_1'+i）.fadeIn（'1000'，$this.show）；
}
}
退还$this；
});
菜单（0.show（）；
});​

或者，您可以从表行中删除id和样式，并将表行封装在一个分区中，然后将id和样式添加到其中。它会起作用的

$(function(){

    var showMenu = function (i,callback){

      if (i>10){
        //stop
         return;
      }else{
         $('#myTable').append('
         <div id="method_1'+i+'" style="display: none;">
         <tr><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>
         </div>');

          $('#method_1'+i).fadeIn('1000', function () {     showMenu(i+1,showMenu); });               
      }
    }

    showMenu(2,showMenu);                                                           

})

$（函数（）{
var showMenu=函数（i，回调）{
如果（i>10）{
//停止
返回；
}否则{
$（'#myTable'）。追加（'
C方法（CAM）：2-雨棚9-雨篷
');
$（'#method_1'+i）.fadeIn（'1000'，function（）{showMenu（i+1，showMenu）；}）；
}
}
showMenu（2，showMenu）；
})

编辑

---

HTML属性应该是双引号。注意，它似乎无法修复。我刚刚测试了这个。。。Works Perfected这是一个非常有趣的行为，有人能解释一下为什么会这样吗？尽管我不确定这是否重要，但是你的JSFIDLE与你提供的代码不一样……对fadeIn的回调是错误的，但是这个行为实际上并没有淡入。。它只是在项目上重复你在说什么？它怎么不褪色？我刚刚用一个JSFIDLE更新了我的答案，这个JSFIDLE非常有效，使用了我提供的代码……我使用的是IE8，也许这就是问题我刚刚打开了你的FIDLE，它不会褪色。inI刚刚在IE7、IE8和IE9中测试过，它们都工作得很好。我只是看了看你的JSFIDLE，它和我的完全一样…所以我不知道它怎么对你不起作用。。。