jQuery的配售及/或输入框

Question

嘿，我试图找到“甜蜜点”，因此，这将工作，因为我需要它来。

下面是我与我的工作电流JS代码。

和箱代码：

$("#ANDbtn").click(function() { 
    if (numOR > numAND) { 
     //Place AND box AFTER previous OR box 
     $("#ANDArea_" + (numOR + 1)).after(html); 
     console.log('if: ANDArea_' + numOR + ">" + numAND); 
    } else if (numAND > numOR) { 
     //Place AND box AFTER previous AND box 
     $("#ANDArea_" + (numAND - 1)).after(html); 
     console.log('else if: ANDArea_' + numAND + ">" + numOR); 
    } else { 
     //There is no AND box so lets add the first one 
     $("#ANDORArea").after(html); 
     console.log('else'); 
    } 

    numAND++; 
}); 

OR BOX代码：

$("#ORbtn").click(function() { 
    if (numAND > numOR) { 
     //Place OR box AFTER previous AND box 
     $("#ORArea_" + (numAND + 1)).after(html); 
     console.log('if: ORArea_' + numAND + ">" + numOR); 
    } else if (numOR > numAND) { 
     //Place OR box AFTER previous OR box 
     $("#ORArea_" + (numOR - 1)).after(html); 
     console.log('else if: ORArea_' + numOR + ">" + numAND); 
    } else { 
     //There is no OR box so lets add the first one 
     $("#ANDORArea").after(html); 
     console.log('else'); 
    } 

    numOR++; 
}); 

每次用户按下按钮AND它加1到可变numAND。同样地，当用户按下OR按钮，它添加一个1到可变numOR。 两个变量开始于。

当用户按下和按钮，它把和箱屏幕（其转到其他在上面的逻辑）上，如果用户再次按下和按钮，它把AND框AFTER先前和框（其中如果在上述逻辑中，则转到否则）。

这同样适用于在或箱为好。当用户按下OR按钮，它会将或者屏幕（其转到其他在上面的逻辑）上盒，如果用户按下OR按钮再次它把OR box AFTER the previous or box（如果在上述逻辑中，则转到否则如果）。

因此，所有的作品就好了。当我遇到的问题是，当我打的和按键的和箱显示出来，然后撞到或按钮 - 它不地方或盒子低于的和箱和反之亦然。

这里有一个FIDDLER为您所观赏的乐趣。

Answer 1

您正在使用after jQuery函数来放置一些元素，这些元素将元素粘贴在#ANDORArea行之后而不是表格末尾。我相信你想把append的元素放到表的最后。要做到这一点，你可以用$("#ANDORAreaTableBody").append(html)的行代替$("#ANDORArea").after(html)，这样元素就放在表格的最后，在其他元素的下面。

检查这个fiddle看到它在行动。