【蓝桥杯web】第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-大学组：水果叠叠乐(真题解析)

   题目介绍：

消消乐是一款益智类小游戏，最近比较火爆的一种是立体叠叠乐式的，然后小蓝也想开发一个自己练练手，给它起名叫“水果叠叠乐”。

准备：

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

├── css
│   └── style.css
├── images
├── index.html
└── js
    └── jquery.min.js

其中：

• index.html 是主页面。
• js/jquery.min.js 是 jQuery 文件。
• images 是图片文件夹。
• css/style.css 是样式文件。

运行项目如下所示： 

当前出现的问题是：

1. 点击图片下方方框并未显示。
2. 点击图片并未消失
3. 方框并未设置最大限制数量

目标：

点击页面上方的水果元素，水果会进入到下方的格子中。当格子中有三个相同水果时会自动消除。格子最多放 7 个水果，当格子中水果为 7 个且无法消除时，点击上方水果元素将不在有任何效果。 请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

1. 页面上方 id=card 中 DOM 元素中的水果元素点击消失的动画效果已在代码中给出，无需操作。
2. 每次点击页面上方水果元素需要在页面下方的长方格（ id=box ）元素中添加该元素节点，当下面长方格中有三个相同的水果元素时，从盒子元素删除这三个相同的水果元素节点。
3. 当页面下方的长方格（ id=box ）元素中的水果为 7 个且无法消除时，被点击的水果元素节点不在被添加长方格元素中。

完成后，最终页面效果如下：

解题思路：

将点击的<li>标签使用clone() 方法生成被选元素的副本，包含子节点、文本和属性。

后使用append在被选元素的结尾插入内容（这里是在box盒子后插入<li>标签）

同时使用hide()函数隐藏被选的元素（这里是隐藏顶部的图片，即点击一个元素，对应的消失一个元素）

判断方框内是否出现3个相同data-id的元素，如果出现，则执行remove() - 删除被选元素（及其子元素），从而清除box盒子内的<li>标签元素（达到清除的效果）

JScript代码如下：

<script>
      $("#card li").on("click", function (e) {
        // TODO: 待补充代码
        if($("#box li").length<7)
        {
          $("#box").append($(this).clone())
          $(this).hide()

          //当前判断方框内是否出现3个相同元素
          if($(`#box li[data-id=${$(this).attr("data-id")}]`).length==3)
          {
            $(`#box li[data-id=${$(this).attr("data-id")}]`).remove() //出现则直接移除
          }
        }
        
      });
    </script>

大功告成！！

如有不合理的地方，欢迎各位大牛提出指正！

笔芯ღ( ´･ᴗ･` )