网站开发net教程,wordpress+绿色,网站服务器备案查询网站,网站服务器租用 配置选中 index.html 右键启动 Web Server 服务#xff08;Open with Live Server#xff09;#xff0c;让项目运行起来。接着#xff0c;打开环境右侧的【Web 服务】#xff0c;就可以在浏览器中看到如下效果#xff1a; 目标
完善 js/index.js 的 TODO 部分#xff0c;实…选中 index.html 右键启动 Web Server 服务Open with Live Server让项目运行起来。接着打开环境右侧的【Web 服务】就可以在浏览器中看到如下效果 目标
完善 js/index.js 的 TODO 部分实现以下目标
将拖动的拼图块与目标拼图块的图片进行交换这包括交换图片的 src 属性和 data-id 属性。待补充代码的 drop 函数中现有的两个变量解释如下draggedPiece代表被拖动的拼图块的图片元素的父元素。this代表当前目标位置的拼图块的图片元素父元素。
拼图成功后的 DOM 如下图片 src、alt、data-id 均按照 1-9 顺序排列
div classpuzzle-container idpuzzle-containerdiv classpuzzle-piece draggabletrueimg src./images/img1.png data-id1 //divdiv classpuzzle-piece draggabletrueimg src./images/img2.png data-id2 //div!-- ... 省略部分代码 --div classpuzzle-piece draggabletrueimg src./images/img9.png data-id9 //div
/div显示/隐藏成功消息拼图成功则设置成功消息元素idsuccess-message的 class 名为 show否则该元素的 class 名为 hide。注意成功消息元素同时有且只能有一个 class 名
完成后效果如下 题解
// 定义拖放事件的处理函数
function drop(event) {// 检查是否拖动的拼图块不是当前目标拼图块// draggedPiece 被拖动的拼图块元素。this 目标位置的拼图块元素。if (draggedPiece ! this) {console.log(draggedPiece);console.log(this);// TODO待补充代码// 交换拼图块图片和数据 IDconst curImg this.querySelector(img);const draggedImg draggedPiece.querySelector(img);[curImg.src, draggedImg.src] [draggedImg.src, curImg.src];[curImg.dataset.id, draggedImg.dataset.id] [draggedImg.dataset.id,curImg.dataset.id,];// 检查拼图是否完全正确const puzzles document.querySelectorAll(.puzzle-piece img);const isValid Array.from(puzzles).every((img, index) parseInt(img.dataset.id) index 1);successMessage.className isValid ? show : hide;}
