Question

我有一个显示在屏幕上的员工列表。当我点击其中一个时，会出现一个弹出窗口，其中包含可以对该员工“完成”的几个操作的列表（删除，修改...）。当我点击员工时，弹出窗口会正确显示，但当我点击另一个时，新的弹出窗口会附加到上一个窗口。我是这样做的：

    employee.click(function(){   //employee is a javascript variable 
          createPopUp(taskActions, mainDiv); //taskActions is an array of strings
     });

     function createPopUp(taskActions, parentDiv) {
     var popUp = null;
     if (taskActions.length != 0) {
        popUp = $('<div style="z-index:2;position:fixed;display:inline-block;border-style:solid;border-color:black;text-align:center;margin:0px;padding:2px;background-color:white"/>');
        for (var i = 0; i< taskActions.length; i++) {
           function createAction(i) {
              var actionDiv =  $('<div>' + taskActions[i]+ '</div>');
              actionDiv.on('click', function(event) {
                 //doSomeAction
               });
              popUp.append(actionDiv);
         }
         createAction(i);
      }
      parentDiv.append(popUp);
   }
}

我知道我必须在createPopUp的某处隐藏弹出窗口。而且很有可能在将popUp附加到parentDiv之前。但是当我这样做时，popUp就不再出现了。

这里有什么问题？

感谢您的帮助

Answer 1

让你的createPopup函数返回jQuery对象：

然后，只要你创建一个，就存储对它的引用，以便你以后可以删除它：

(function(){
  var $popUp;
  employee.click(function(){   //employee is a javascript variable 
    if($popUp) $popUp.remove();
    $popUp = createPopUp(taskActions, mainDiv); //taskActions is an array of strings
  });
})();

function createPopUp(taskActions, parentDiv) {
    var popUp = null;
    if (taskActions.length != 0) {
        popUp = $('<div style="z-index:2;position:fixed;display:inline-block;border-style:solid;border-color:black;text-align:center;margin:0px;padding:2px;background-color:white"/>');
        for (var i = 0; i< taskActions.length; i++) {
           function createAction(i) {
              var actionDiv =  $('<div>' + taskActions[i]+ '</div>');
              actionDiv.on('click', function(event) {
                 //doSomeAction
               });
              popUp.append(actionDiv);
         }
         createAction(i);
      }
      parentDiv.append(popUp);
   }
   return popUp;
}

Answer 2

我只需在div中添加一个类，然后在添加新div之前删除该类的所有元素：

$('.popup').remove();
popUp = $('<div class="popup" style="z-index:2 // etc

如何在javascript中创建新窗口时隐藏上一个弹出窗口

2 个答案: