javascript - 我在浏览器控制台中看到类发生变化，但浏览器中没有视觉变化

Question

只是为了练习，我试图在将鼠标悬停在 div 上时更改其背景颜色，并在将鼠标悬停时恢复它。如果您单击该 div，我会再次将其背景颜色更改为不同的颜色并使其可编辑。当您单击外部时，我会将内容恢复正常并使 div 再次变为只读。

直到一个小时前，我的代码在这两个方面都运行良好 - 添加和删除了目标元素所需的类，并且我可以看到元素的视觉变化。

突然间，尽管我看到 CSS 类在适当的事件上被正确添加和删除，但视觉变化却停止了。换句话说，当我将鼠标悬停在#theDiv 中或从其中移出以及单击进入和退出时，#theDiv 的背景颜色不会改变。

我的代码位于 git 存储库中名为 contentEditable.html 的文件中.

当它停止工作时，我创建了另一个文件 here named temp.html隔离我试图进行的更改，并且它们在 temp.html 中正常工作。他们在 contentEditable.html 中突然停止工作。

虽然代码已经链接到我的 git 存储库中的上面，但为了您的方便，我也在此处复制它。

$(document).ready(function() {
  var theDiv = $("#theDiv");
  var isBeingEdited = false;

  theDiv.on("mouseover", null, true, makeAppearEditable);
  theDiv.on("mouseout", null, false, makeAppearEditable);

  theDiv.on("click dblclick", null, true, makeEditable);
  theDiv.on("blur", null, false, makeEditable);

  function makeAppearEditable(event) {

    console.log(event.target + ": " + event.type);
    var targetElement = $(event.target);

    if (isBeingEdited) {
      return false;
    }

    if (event.data) {
      targetElement.addClass("canBeEdited");
    } else {
      targetElement.removeClass("canBeEdited");
    }
  };

  function makeEditable(event) {

    console.log(event.target + ": " + event.type);

    var targetElement = $(event.target);

    isBeingEdited = event.data;
    targetElement.attr("contenteditable", event.data);

    if (event.data) {
      targetElement.addClass("editable");
    } else {
      targetElement.removeClass("editable");
    }
  };
});

#theDiv {
  min-width: 400px;
  max-width: 50%;
}

;
.editable {
  background-color: #f2e793;
}

;
.canBeEdited {
  background-color: yellow;
}

;

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="theDiv">
  This is some text. When you hover over it, it will change its color to indicate that it can be edited. When you click it or double click it, it again change its color and will become editable. When you stop editing and click outside it, it will become
  non-editable and will change its color back to white.
</div>

Answer 1

从CSS中删除;，它将起作用并更新CSS规则

; <======== remove it
.canBeEdited.editable {
  background-color: #f2e793;
}

$(document).ready(function() {
  var theDiv = $("#theDiv");
  var isBeingEdited = false;

  theDiv.on("mouseover", null, true, makeAppearEditable);
  theDiv.on("mouseout", null, false, makeAppearEditable);

  theDiv.on("click dblclick", null, true, makeEditable);
  theDiv.on("blur", null, false, makeEditable);

  function makeAppearEditable(event) {

    console.log(event.target + ": " + event.type);
    var targetElement = $(event.target);

    if (isBeingEdited) {
      return false;
    }

    if (event.data) {
      targetElement.addClass("canBeEdited");
    } else {
      targetElement.removeClass("canBeEdited");
    }
  };

  function makeEditable(event) {
    console.log(event.target + ": " + event.type);
    var targetElement = $(event.target);
    isBeingEdited = event.data;
    targetElement.attr("contenteditable", event.data);
    if (event.data) {
      targetElement.addClass("editable");
    } else {
      targetElement.removeClass("editable");
    }
  };
});

#theDiv {
  min-width: 400px;
  max-width: 50%;
}

.canBeEdited.editable {
  background-color: #f2e793;
}

.canBeEdited {
  background-color: yellow;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="theDiv">
  This is some text. When you hover over it, it will change its color to indicate that it can be edited. When you click it or double click it, it again change its color and will become editable. When you stop editing and click outside it, it will become
  non-editable and will change its color back to white.
</div>