0

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

    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 之前。但是当我这样做时，弹出窗口不再出现。

这里有什么问题？

谢谢您的帮助

4

2 回答 2

0

让你的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;
}
于 2013-09-17T15:22:14.077 回答
0

在添加新的之前，我只需将一个类添加到该类div并删除该类的所有元素div：

$('.popup').remove();
popUp = $('<div class="popup" style="z-index:2 // etc
于 2013-09-17T15:32:47.347 回答