javascript - jQuery 按顺序放置 AND/OR 输入框

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++;
});

或框代码:

$("#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按钮时，变量 numAND 就会加 1。同样，当用户按下OR按钮时，它将1添加到变量numOR中。 两个变量都从0开始。

当用户按下AND按钮时，它会将AND框放在屏幕上(转到上面逻辑中的else)如果用户再次按下AND按钮，它会将AND框放置在前一个AND框之后(即到上面逻辑中的 else if)。

OR 框也是如此。当用户按下OR按钮时，它会将OR框放在屏幕上(它会转到上面逻辑中的else)，并且如果用户再次按下OR按钮，它会将OR框放置在前一个OR框之后> (转到上面逻辑中的else if)。

所以一切都很好。我遇到的问题是，当我点击AND按钮时，会出现一个AND框，然后点击OR按钮 - 它确实不要将OR框放在AND框下面，反之亦然。

这是一个FIDDLER因为您正在观看乐趣。

Answer 1

您正在使用 after jQuery 函数来放置一些元素，该函数将元素粘贴在 #ANDORArea 行之后而不是表格末尾。我相信您想将元素附加到表格的末尾。为此，您可以将 $("#ANDORArea").after(html) 替换为 $("#ANDORAreaTableBody").append(html) 的内容> 使元素放置在表格末尾、其他元素下方。

检查这个fiddle看看它的实际效果。