目标：我希望能够在图像上添加评论并使用它们的 X、Y 坐标来保存评论并显示以备后用。预期结果：我希望用户单击启用“评论模式”并显示表单的“新评论”按钮。如果用户单击远离表单，我希望表单隐藏并禁用“评论模式”，直到用户再次单击“新评论”。如果再次按下“新评论”，请重复上述操作。实际结果：该代码片段当前允许用户单击“新评论”。单击后，该commentMode()函数将被触发并侦听#imageWrapper. 如果用户点击离开，表单将被隐藏 - 但当我再次按下“新评论”时，表单将保持隐藏状态。function commentMode() { imageWrapper.toggleClass('new-comment-pointer'); // changes cursor to show its active imageWrapper.click(function(e) { // on clicking the image newComment = !newComment; // newComment is true console.log(newComment); if(newComment) { // if newComment is true, show the form near the click getCoordinates(e, $('#imageWrapper')); form.show().css({'left': formX, 'top': formY}); form.find('textarea').focus(); form.find('#xAxis').val(x); // x is from the getCoordinates form.find('#yAxis').val(y); // y is from the getCoordinates } else { // if newComment is false, hide the form and turn stop imageWrapper.click form.hide(); imageWrapper.removeClass('new-comment-pointer'); newComment = !newComment; return; //stop listening for click } return; }); }https://codepen.io/lachiekimber/pen/YzzPEqw
3 回答
jeck猫
TA贡献1909条经验 获得超7个赞
我不知道为什么每个人都把它复杂化。首先给表单和按钮一个 id。然后定义一个隐藏的默认表单 css 类。定义另一个使其可见的类：
<style>
.invisible {
display:none;
}
.visible {
display:block !important;
}
</style>
现在我们添加一个文档侦听器，使事情变得更简单，而不是摆弄任何事件......
document.addEventListener(" click ", function(event) {
//try to get a id even when the event element has not
// directly a id but maybee his parent the form
try {
var id = event.target.id;
if (id === "") {
for (i = 0; i < event.path.length; i++) {
id = event.path[i].id;
if (id !== "") {
if (id === "formid") {
break;
}
}
}
} catch(ex){
console.log(ex);
return;
}
var form=document.getElementById("formid");
switch(id){
case "showcommehtbuttonid":
case "formid":
form.classList.add("visible");
break;
default:
form.classList.remove("visible");
}
}
在您的情况下，切换状态有一个缺点 - 处理起来很复杂。通过简单的 id 和按钮效果最佳。那时是毫无疑问的。添加和删除处理程序也没有实际意义。用户单击表单或按钮，表单将变为可见。或者他点击别的东西。在这种情况下，不会选择 id 或“错误”的 id。在这种情况下，默认切换规则使表单不可见。这个东西未经测试，可能需要一些小的调整。最好的 - 在事件处理程序中，您现在还可以添加非常简单的更多操作。
森栏
TA贡献1810条经验 获得超5个赞
我试图重构代码。我首先将代码清理成函数，而不是嵌套单击事件。在重构时，我使用console.log's 来帮助我确定 何时处于commentMode活动状态 - 然后触发showForm()或hideForm()功能。对于一个工作示例：https : //codepen.io/lachiekimber/pen/bGGNYmK
$(function () {
var imageWrapper = $('#imageWrapper');
var form = $('.new-comment');
var x, y, formX, formY;
var newComment = true;
var commentMode = false;
$('#newComment').click(function() {
imageWrapper.toggleClass('new-comment-pointer');
commentMode = !commentMode;
//console.log('newComment');
});
$('#imageWrapper').click(function(e) {
if(commentMode) {
//console.log('commentMode: true');
showForm(e);
} else {
//console.log('commentMode: false');
hideForm();
}
});
function showForm(e) {
getCoordinates(e, imageWrapper);
form.show().css({'left': formX, 'top': formY});
form.find('textarea').focus();
form.find('#xAxis').val(x); // x is from the getCoordinates
form.find('#yAxis').val(y); // y is from the getCoordinates
}
function hideForm() {
form.hide();
}
function getCoordinates(e, image) {
var offset = image.offset();
x = e.pageX - offset.left;
y = e.pageY - offset.top;
formX = x + 50;
formY = y + 20;
}
});
叮当猫咪
TA贡献1776条经验 获得超12个赞
工作和测试:)！好的，我们可以在页面样式上做很多工作，但是 :d 看看整个页面看起来也很简单。我不必为这个小任务与 jquery 争吵 :) 我也仅通过纯 html 设置了自动对焦。
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.invisible {
display: none;
border: 1px solid red;
}
.visible {
display: block !important;
}
</style>
</head>
<body>
<form id="formid" class="invisible">
<h1>Form</h1>
<input type="text" name="size" autofocus>
</form>
<hr>
<input type="button" value="click" id="showcommentbuttonid">
<script>
document.addEventListener("click", function(event) {
try {
var id = event.target.id;
if (id === "") {
for (i = 0; i < event.path.length; i++)
{
id = event.path[i].id;
if (id !== "") {
if (id === "formid") {
break;
}
}
}
}
} catch (ex) {
console.log(ex);
return;
}
var form = document.getElementById("formid");
switch (id) {
case "showcommentbuttonid":
case "formid":
form.classList.add("visible");
break;
default:
form.classList.remove("visible");
}
}
)
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消