Question

我正在创建一个facebook克隆来了解网络开发。所以我已经创建了用户个人资料，现在我希望用户能够更改他的个人资料图片。我写了一个函数，每当用户将鼠标悬停在个人资料图片上时，就会出现一个编辑按钮。我想使用该编辑按钮使表单显示在他可以上传新照片的位置。我怎样才能做到这一点？这是函数的代码：

function editProfilePic(output){
    var x = document.createElement("Button");
    var t = document.createTextNode("Edit");
    x.appendChild(t);
    document.getElementById(output).appendChild(x);
}

当用户将鼠标悬停在图片上时，还有一种方法可以使按钮显示一次，然后当他将图片从图片中取出时，该按钮会消失吗？现在，只要用户输入图片，我就会生成一个新按钮......

Answer 1

最好为您在鼠标悬停上创建的“编辑”按钮分配ID

function editProfilePic(output){
   var x = document.createElement("Button");
   var t = document.createTextNode("Edit");
   x.id = "btnEdit";
   x.appendChild(t);
   document.getElementById(output).appendChild(x);
}

因此，当您隐藏它时，您可以使用其ID

轻松获取编辑按钮

function hideButton(output){ 
   document.getElementById("btnEdit").remove(); 
}

Answer 2

您可以添加onmouseover事件来创建按钮，然后添加onmouseout事件以在鼠标退出该区域时销毁该按钮。

如何使用函数生成的按钮？

2 个答案: