qq_45735316 2020-06-16 23:20 采纳率: 94.1%
浏览 132
已采纳

想要将上面的图片匹配到下面对应的框中,尝试获取id来判断,但是没有成功,match1\2()函数应该怎么写?

图片说明图片说明
//index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>the final project</title>
        <link rel="stylesheet" href="css/finalproject.css" />
        <script src="js/finalproject.js" ></script>
        <style>
            *{
                padding:0px;
                margin:0px;
            }


            .bkgimg
            {
                background-image: url("img/b.jpg");
                background-repeat: repeat;
            }
        </style>
    </head>
    <body onload="chk()" class="bkgimg">
        <center>


            </br>
            <!--角色配对小游戏start-->

            <div id="game">
                <div id="timelinesT" style="width:100%;">
                <span id="timelinest">盗墓笔记小游戏</span>
                <span id="gameintro">
                    下面将给出与书中人物有关昵称与特征的描述
                    请将以下书中人物拖拽到与其对应的描述中
                </span>
                </div>

                <div id="obj" ondragenter="prevent()" ondragover="prevent()" ondrop="getObj(this)">
                    <img src="img/wuxie.JPG" id="Wu" draggable="true" ondragstart="startDrag(this)" value="1">
                    <img src="img/zhangqiling.JPG" id="men" draggable="true" ondragstart="startDrag(this)">
                    <img src="img/xia.JPG" id="Xia" draggable="true" ondragstart="startDrag(this)">
                    <img src="img/pangzi.JPG" id="Pang" draggable="true" ondragstart="startDrag(this)">
                    <img src="img/huaye.JPG" id="Hua" draggable="true" ondragstart="startDrag(this)">
                    <img src="img/sanshu.JPG" id="San" draggable="true" ondragstart="startDrag(this)">
                </div>

                <!--承载区-->
                <div id="match">
                    <div id="M1" class="M" ondragenter="prevent()" ondragover="prevent()" ondrop="match1(this)"></div>
                    <div id="M2" class="M" ondragenter="prevent()" ondragover="prevent()" ondrop="match2(this)"></div>
                    <div id="M3" class="M" ondragenter="prevent()" ondragover="prevent()" ondrop="match3(this)"></div>
                </div>

                <div id="match">
                    <div id="M4" class="M"></div>
                    <div id="M5" class="M"></div>
                    <div id="M6" class="M"></div>
                </div>

                </div>
            </div>

            <!--角色配对小游戏end-->


        </center>
    </body>
</html>

//.js

var myimg;
function startDrag(that)
{
    myimg=that;
    console.log(myimg);
}
function prevent()
{
    e=window.event;
    e.preventDefault();
}
function getObj(that)
{
    var Objimg=myimg.cloneNode();
    that.appendChild(Objimg);
}
function Deleteimg(that)
{
    var Obj=myimg.parentNode;
    Obj.removeChild(myimg);
}
function match1(that)
{

}
function match2(that)
{
    myimg=that;
    console.log(myimg);
    var ID=window.document.getElementsByTagName("img")[0];
    alert(ID);
}

//.css

#obj
{
    width:100%;
    height:746px;
    border:1px solid #CCCCCC;
}
#match{
    border:1px solid whitesmoke;
    width:100%;
    height:370px;
}
.M{
    width:280px;
    height:370px;
    border:1px solid whitesmoke;
}

#M1,#M4,#D1,#D4
{
    float:left;
}
#M2,#M5,#D2,#D5
{
    float:left;
    margin-left: 60px;
}
#M3,#M6,#D3,#D6
{
    float:right;
}

  • 写回答

1条回答 默认 最新

  • 一只成序源 2020-06-17 11:51
    关注

    你的控制台已经获取到标签了,只需要 myimg.id,就可以获取到id了吧

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 9月25日

悬赏问题

  • ¥15 前端 uniapp App端在离线状态如何使用modbus 连接手机蓝牙进行读写操控机器?
  • ¥15 SQL语句根据字段自动生成行
  • ¥500 “掌声响起来”软件(不确定性人工智能)
  • ¥500 我要找大模型一体机产品手册和应用案例
  • ¥60 用r语言进行数据分析
  • ¥20 关于游戏c++语言代码问题
  • ¥15 如何制作永久二维码,最好是微信也可以扫开的。(相关搜索:管理系统)
  • ¥15 delphi indy cookie 有效期
  • ¥15 labelme打不开怎么办
  • ¥35 按照图片上的两个任务要求,用keil5写出运行代码,并在proteus上仿真成功,🙏