Question

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

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

然后，即使我看到正确添加和删除了正确事件的CSS类，突然发生了视觉上的变化。换句话说，#theDiv的背景颜色在我悬停进出时以及当我点击进入并离开它时都不会改变。

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

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

虽然代码已经在我的git repo中链接到上面了，但为了您的方便，我在这里也会重现它。

＆＃13;

$(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");
    }
  };
});

＆＃13;

#theDiv {
  min-width: 400px;
  max-width: 50%;
}

;
.editable {
  background-color: #f2e793;
}

;
.canBeEdited {
  background-color: yellow;
}

;

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

$(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");
    }
  };
});

＆＃13;

#theDiv {
  min-width: 400px;
  max-width: 50%;
}

.canBeEdited.editable {
  background-color: #f2e793;
}

.canBeEdited {
  background-color: yellow;
}

＆＃13;

<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>

＆＃13;

我看到浏览器控制台中的类发生了变化，但浏览器中没有视觉上的变化

1 个答案: