我下面有 JS,一旦单击图像下方的图像,我会尝试显示菜单项,一旦单击某个项目,它就会消失。我有多个图像,这就是我构建这个动态内容菜单的原因。我计划在 userMenuContent 中添加一堆 html 元素
using var userMenuContent ="<div><form>...</<form></div>";
但首先我的小测试失败了
function userMenu() {
var userMenudiv = document.createElement("div");
userMenudiv.setAttribute("class", "statusContainer");
var userMenuContent = "<p>test</p>";
$(userMenudiv).append($(userMenuContent));
$(userMenudiv).hide();
this.appendChild(userMenudiv);
$(userMenudiv).slideDown();
}
<img class="icon" src="image.png" onclick="userMenu()"/>
当我点击我得到的图像时 类型错误:this.appendChild 不是函数。 我正在使用 jquery 1.8.3 和 jquery-ui1.8.24
最佳答案
“this”指的是窗口对象,而不是图像。
不要使用内联事件处理程序。为 DOM 元素指定一个 id 并以这种方式选择它。
您无法向图像添加 div。相反,您需要指定另一个目标元素
由于您使用的是 jQuery,因此只需按照 jQuery 的方式进行即可。
$(document).ready(function(){
$('#userMenuImg').click(function(){
$('#target')
.append('<div class="statusContainer"><p>test</p></div>')
.slideDown();
});
});
<img id="userMenuImg" class="icon" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMKbTxKTOJbJvVTt2SZak49lARNnCU4D7ECfZn1KspIn6SXDHz3A">
<div id="target"></div>
关于javascript - this.appendChild 不是一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14132953/