Javascript 在函数中使用切换类

我有一个函数，可以触发mouseenter上的一个事件（一个覆盖），随后必须解除绑定。在该函数中，有一个x，我想关闭覆盖，并允许用户能够重新触发事件。现在，取消绑定（这是我需要的）不起作用，即使我从代码中删除了取消绑定事件，css格式也会关闭

以下是我的功能：

$(function() {
  $(document).mouseenter(function(event){
    event.stopPropagation();
    var docHeight = $(document).height() - ($(document).height() * .1); 
    if(event.pageY > docHeight){
      $("#overlay").show();
      displayOverlay();
      displayModal(itemCount, imageArray, cartTotal);
      $(this).unbind('mouseenter mouseleave');
    }
    $("#x").click(function(){
      $("#overlay").hide();
    });
  });
}); 

这是我的CSS：

function displayOverlay() {
  $("<div id='overlay'></div>").css({
    "position": "fixed",
    "top": "0px",
    "height": "1200px",
    "width": "100%",
    "z-index": 100,
    "background-color": "rgba(0,0,0,0.5)"
  }).appendTo("body");
}

function displayModal(itemCount, imageArray, cartTotal) {
  var imageHTML = "";
  for (i = 0; i < imageArray.length; i++){
    imageHTML += imageArray[i];
  }
  if (imageHTML === ""){
    imageHTML = "You do not have any items in your cart";
  }
  $("<article id='modal'><div id='itemCount'>" + "Total Items: "
    + itemCount + "<div id='images'>" + imageHTML +
    "<div id='cartTotal'>" + "Subtotal $" + cartTotal + "<div id='x'>"
    + "(X)" + "</div></div></div></div></article>").css({
    "width": "461px",
    "height": "263px",
    "line-height": "200px",
    "position": "fixed",
    "top": "50%",
    "left": "50%",
    "margin-top": "-155px",
    "margin-left": "-232px",
    "background-color": "rgb(255,255,255)",
    "border-radius": "5px",
    "text-align": "center",
    "z-index": 101,
    "border": "1px solid rgb(227,227,227)",
    "border-top": "4px solid rgb(217,0,31)"
  }).appendTo("#overlay");
  $("#itemCount").css({
    "position": "relative",
    "bottom": "79px",
    "font-family": "Helvetica",
    "color": "#000",
    "font-size": "20px"
  }).appendTo("#modal");
  $("#images").css({
    "position": "relative",
    "bottom": "87px"
  }).appendTo("#itemCount");
  $("#cartTotal").css({
    "position": "relative",
    "bottom": "182px",
    "color": "gray",
    "font-size": "18px"
  }).appendTo("#images");
  $(".buttons").css({
    "line-height": "10px",
    "position": "relative",
    "bottom":"86px"
  }).appendTo("#cartTotal");
  $("#x").css({
    "position": "relative",
    "top": "9px",
    "font-size": "16px"
  }).appendTo(".buttons");
  $("a").css({
    "color": "white"
  });
}

函数displayOverlay（）{
$（“”）.css({
“位置”：“固定”，
“顶部”：“0px”，
“高度”：“1200px”，
“宽度”：“100%”，
“z指数”：100，
“背景色”：“rgba（0,0,0,0.5）”
}).附于（“主体”）；
}
函数displayModal（itemCount、imageArray、cartTotal）{
var imageHTML=“”；
对于（i=0；i

请尝试指定实际的元素（或选择器）名称，而不要使用$（this）

---

另外，可能是因为您在一个unbind（）函数中同时指定了两个事件。

我应该在上面提到，我正在通过javascript脚本对网站进行更改。解除“mouseenter”和“mouseleave”绑定的目的是什么？你想让这些事件只运行一次吗？鼠标指针上有一个不透明的背景被触发，如果不解开鼠标指针，背景就会改变。

$(document).unbind('mouseenter').unbind('mouseleave');