Question

我有一个基于用户通过点击功能创建某些div的Web应用程序。当用户添加div时，我也给他们删除所述功能的能力。每次用户添加div时，都会将其推入数组。然后用户可以保存数组并在它们返回时加载它。

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

我遇到的问题是我还必须在加载函数中调用delete函数，以便在单击添加按钮之前使删除按钮有效。我试过只调用函数外的函数，但因为没有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();

Answer 1

我认为如果你有单独的按钮来添加和删除它会更容易。这样你可以绑定一个按钮将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(' '));
  }

Answer 2

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

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

调整选择器以适合您的HTML

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

该操作将应用于容器中的所有删除按钮，无论它们是在附加此单击处理程序时是否就位，或稍后插入。
如果（外部）容器本身未被删除（删除），则此委派操作将保留在原位。

Jquery / javascript：加载页面时不需要的重复功能

2 个答案: