Question

尝试这样做：
函数getRec接收一个字符串说（1,3,4）。然后它将其拆分为一个数组。然后它为数组的每个元素调用addRecBox。

addRecBox将一些规范附加到每个框中。每一个都应该渐渐消失。然后出现在另一个之后。之后附加“添加”框。

问题1：动画不流畅问题2：输出似乎混乱了。

这是我的代码。

function getRec(arrayS)
{  
recArray = arrayS.split(',');
addRecoBox(0,recArray.length);
}

function addRecoBox(i,x){
var $div = $("<div>", {id: recArray[i], class: "recH"});
$("#recHolder").append($div);
addSpecs(recArray[i],0,data[recArray[i]].specfication.length);
$('#'+recArray[i]).append('<div>Add</div>');
    if(i<x){
        i++;
        addRecoBox(i,x);
    }
}

function addSpecs(i,j,x){ 
var $specDiv = $("<div>", {id: "spec"+i+"_"+j, class: "specHolder"});
$specDiv.html(data[i].specfication[j]);
$('#'+recArray[i]).append($specDiv); 
$specDiv.fadeIn( 800, function() {
if (j<x){
    j++;
    addSpecs(i,j,x);    
    }
});

}

非常感谢任何帮助。

http://jsfiddle.net/dv2utex6/6/

Answer 1

<强> DEMO

好吧，经过这么多实验，我在你的代码中发现了很多问题，我在下面列出了一些问题：

specification拼写在数据[0]和数据[1]以及数据[2]和addSpecs调用区域和内部函数中也不正确。检查你的   小提琴。所以当它达到error时它会给.specification   第1 data



在检查addspecs值小于addRecoBox之前，您在i中呼叫x，这导致问题，同时追加到最后   data



在addSpecs中你附加了不匹配的元素，即$('#'+recArray[i]).append($specDiv);，而你曾经通过了   数组的值，而不是被调用的index中的addSpecs   从addRecoBox and that made your whole data`追加   错误：

检查上述内容的 fiddle ，您会发现上面提到的错误是针对您的问题的解决方法：

var data=[];
data[0]={};
data[0].specification = ['a','b','c']; //spelling mistake here
data[1]={};
data[1].specification = ['p','q','r','s']; //spelling mistake here
data[2]={};
data[2].specification = ['x','y','z']; //spelling mistake here
data[3]={};
data[3].specification = ['1','2'];
data[4]={};
data[4].specification = ['fu','ba','r'];

var arrayS = '1,3,4';
var recArray = [];
getRec(arrayS);

function getRec(arrayS)
{  
    recArray = arrayS.split(',');
    addRecoBox(0,recArray.length);
}

function addRecoBox(i,x){
    var $div = $("<div>", {id: recArray[i], class: "recH"});
    $("#recHolder").append($div);
    $('#'+recArray[i]).append('<div>Add</div>');
        if(i<x){
            addSpecs(recArray[i],0,data[recArray[i]].specification.length);
            //spelling mistake in the above 'specification' and moved it inside if statement 
            i++;
            addRecoBox(i,x);
        }
}

function addSpecs(i,j,x){ 
    var $specDiv = $("<div>", {id: "spec"+i+"_"+j, class: "specHolder"});
    $specDiv.html(data[i].specification[j]).hide();
    $('#'+i).append($specDiv);  //You used to assign as recArray[i] here
    console.log($('#'+recArray[i]))
    $specDiv.fadeIn( 800, function() {
    if (j<x){
        j++;
        addSpecs(i,j,x);    
        }
    }); 
}

Answer 2

好的，这就是我设法做到的方法。 Fiddle

var recArray = arrayS.split(',');

addRecoBox(0);

function addRecoBox(i){
var $div = $("<div>", {id: recArray[i], class: "recH"});
$("#recHolder").append($div);
addSpecs(i,recArray[i],0,data[recArray[i]].specification.length);
}

function addSpecs(index,i,j,x){
var $specDiv = $("<div>", {id: "spec"+i+"_"+j, class: "specHolder"});
$specDiv.html(data[i].specification[j]);
$specDiv.css('display','none');
$('#'+i).append($specDiv); 
$specDiv.fadeIn( 800, function() {
j++;
    if (j<x){
    addSpecs(index,i,j,x);    
    } else {
        $('#'+i).append('<div id="add'+i+'">Add</div>');
        $('#add'+i).css('display','none');
        $('#add'+i).fadeIn(800, function(){
            index++;
            if (index<recArray.length){
            addRecoBox(index);
            }
        });
    }
}); 
}

Answer 3

我修改了

$specDiv.html(data[i].specfication[j]);

到此：

$specDiv.html(data[i].specfication[j]).hide();

看起来更好吗？

小提琴：http://jsfiddle.net/ahvonenj/dv2utex6/9/

在jQuery动画中需要性能帮助

3 个答案: