0

我有一个基于用户通过单击功能创建某些 div 的 Web 应用程序。当用户添加 div 时，我还赋予他们删除所述功能的能力。每次用户添加一个 div 时，它都会被推送到一个数组中。然后用户可以保存数组并在他们回来时加载它。

删除 div 的函数嵌套在要添加的函数中，因为这是我发现使函数工作的唯一方法。

我遇到的问题是，在单击添加按钮之前，我还必须在加载函数中调用删除函数以使删除按钮起作用。我尝试在任一函数之外调用函数，但因为没有 div 开始。因此，当页面加载并单击删除按钮时，它会执行两次并破坏应用程序。

我是编程新手，我现在所做的主要是程序性的，所以任何输入工作都会受到赞赏。我觉得我犯了一个菜鸟错误，伪代码如下。

$(button).cick(function(){
    store div in array;
    add div to container;
    call remove function;
});
function loadPage() {
    retrieve stored array;
    add stored divs to container;
    call remove function;
}
loadPage();
4

2 回答 2

0

我认为如果您有单独的按钮来进行添加和删除，它会更容易。这样，您可以绑定一个按钮以将 div 添加到容器中，而另一个按钮则用于删除最后推送的 div。

这样的事情可能会有所帮助

  var listOfAddedDivs = [];

  $('.addDivButton').click(addNewDiv);

  $('.removeDivButton').click(removeCurrentDiv);


  function addNewDiv() {
     listOfAddedDivs.push('<div> something </div>');
     updateContainer(listOfAddedDivs);
  }

  function removeCurrentDiv() {
    if(listOfAddedDivs.length >0) {
          listOfAddedDivs.pop();
      }
      updateContainer(listOfAddedDivs);
  }

  function updateContainer(arrayContainingDivs) {

   $('.container').html(arrayContainingDivs.join(' '));
  }
于 2012-08-07T23:49:16.317 回答
0

您可以将删除操作委托给容器，如下所示：

$('#container').on('click', '.delete', function() {
    $(this).closest('div.className').remove();
    //here delete stored clone from array.
});

调整选择器以适合您的 HTML

这样，任何带有 的按钮class="delete"在单击时都会导致其（内部）包含的 div 被删除（删除）。

  • 该操作将应用于容器中的所有删除按钮，无论它们是在附加此单击处理程序时就位，还是稍后插入。
  • 如果（外部）容器本身没有被移除（删除），则此委托操作将保持不变。
于 2012-08-08T00:09:03.073 回答