javascript - JS img 点击函数未定义

Question

我试图确保当我单击图像时

<div id="getImage" class="gallery_grid_item md-card-content">
<img onClick="handleImage()" src ="img.png">
</div>

<div id="holdImage">
</div>

然后将其放入另一个div

function handleImage() {
        var $img = $("#getImage").children("img");
        $("#holdImage").append($img);
    }

但是，我已经仔细检查过这一点，但该函数在控制台中仍然显示为未定义？

这是怎么回事？

Answer 1

这是由您错过的某些事情引起的，我已纠正所有这些

1. $("getImage") 替换为 $("#getImage") ，(这里漏掉了一个 #)<

2. onClick="handleImage() 替换为 onClick="handleImage()" ，(您错过了一个“此处)

3. var $img 被 var img 替换(您不需要有 $ 符号来声明变量在js中。

function handleImage() {
            var img = $("#getImage").children("img");
            $("#holdImage").append(img);
        }

#getImage{
width:50px;
height:100px;
border:1px solid #000;
}
#getImage>img{
width:100%;
height:100%;
}

#holdImage{
width:100px;
height:200px;
border:1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="getImage" class="gallery_grid_item md-card-content">
    <img onClick="handleImage()" src ="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" >
 </div>

    <div id="holdImage">
    </div>