仅出于练习目的,如果您将div悬停在div上,我会尝试更改它的背景颜色,并在将其悬停时将其恢复。如果您单击div,我会再次将其背景色更改为其他颜色并使其可编辑。当您在外面单击时,我将一切恢复为正常,并再次将div设为只读。
直到一个小时前,我的代码在两个方面都工作良好-向目标元素添加和删除了所需的类,并且可以看到元素的外观变化。
然后,即使我看到在适当的事件中正确添加和删除了CSS类,视觉上的变化也突然停止了。换句话说,当我将鼠标悬停在#theDiv
上或单击它时,背景色不会改变。
我的代码位于git存储库中的一个名为contentEditable.html的文件中。
当它停止工作时,我制作了另一个文件here named temp.html来隔离要尝试进行的更改,它们在temp.html中可以正常工作。他们只是突然停止了contentEditable.html中的工作。
尽管代码已经在我的git repo中链接到上面,但是为了方便起见,我也在此处重新生成了代码。
$(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>
最佳答案
从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>