【Html.js——Bug修复】大电影（蓝桥杯真题-2333）【合集】

Rossy Yan

发布于 2025-02-02 21:19:07

2K0

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

背景介绍

一千个人眼里就有一千个哈姆雷特，小蓝最近痴迷于电影，但无奈学习任务繁重，只好先将电影收藏起来，留着以后观看，但是电影网站的收藏功能居然失效了，请你帮忙修复这个 bug 吧。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

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

其中：

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

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标效果

请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

点击收藏图标，收藏图标在空心（images/hollow.svg）和实心（images/solid.svg）中进行切换。
点击收藏图标后，仅在收藏图标为实心图形时，成功提示框（class=toast__container）元素显示，2 秒后该提示框自动隐藏或者点击提示框上面的关闭按钮（class=toast__close）该提示框隐藏。请使用 display 属性设置元素的显示隐藏。

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

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>大电影</title>
    <script src="./js/jquery.min.js"></script>
  </head>

  <body>
    <div class="container">
      <!-- Batman -->
      <div class="card u-clearfix">
        <div class="card-media">
          <img src="./images/lmf1.jpg" alt="" class="card-media-img" />
          <div class="card-media-preview u-flex-center">
            <img src="./images/play.svg" alt="" />
          </div>
          <span class="card-media-tag card-media-tag-orange">Action</span>
        </div>
        <div class="card-body">
          <h2 class="card-body-heading">Batman</h2>
          <div class="card-body-options">
            <div class="card-body-option card-body-option-favorite">
              <img src="./images/hollow.svg" alt="" />
            </div>
            <div class="card-body-option card-body-option-share">
              <img src="./images/share.svg" alt="" />
            </div>
          </div>
          <ul class="card-body-stars u-clearfix"></ul>
          <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
          <a href="#/" class="card-button card-button-link">
            More info
            <span class="card-button-icon">
              <img src="./images/more.svg" alt="" />
            </span>
          </a>
        </div>
      </div>
      <!-- Lone Ranger -->
      <div class="card u-clearfix">
        <div class="card-media">
          <img src="./images/lmf2.jpg" alt="" class="card-media-img" />
          <div class="card-media-preview u-flex-center">
            <img src="./images/play.svg" alt="" />
          </div>
          <span class="card-media-tag card-media-tag-brown">Western</span>
        </div>
        <div class="card-body">
          <h2 class="card-body-heading">Lone Ranger</h2>
          <div class="card-body-options">
            <div class="card-body-option card-body-option-favorite">
              <img src="./images/hollow.svg" alt="" />
            </div>
            <div class="card-body-option card-body-option-share">
              <img src="./images/share.svg" alt="" />
            </div>
          </div>
          <ul class="card-body-stars u-clearfix"></ul>
          <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
          <a href="#/" class="card-button card-button-link">
            More info
            <span class="card-button-icon">
              <img src="./images/more.svg" alt="" />
            </span>
          </a>
        </div>
      </div>

      <!-- Superman -->
      <div class="card u-clearfix">
        <div class="card-media">
          <img src="./images/lmf3.jpg" alt="" class="card-media-img" />
          <div class="card-media-preview u-flex-center">
            <img src="./images/play.svg" alt="" />
          </div>
          <span class="card-media-tag card-media-tag-orange">Action</span>
        </div>
        <div class="card-body">
          <h2 class="card-body-heading">Superman</h2>
          <div class="card-body-options">
            <div class="card-body-option card-body-option-favorite">
              <img src="./images/hollow.svg" alt="" />
            </div>
            <div class="card-body-option card-body-option-share">
              <img src="./images/share.svg" alt="" />
            </div>
          </div>
          <ul class="card-body-stars u-clearfix"></ul>
          <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
          <a href="#/" class="card-button card-button-link">
            More info
            <span class="card-button-icon">
              <img src="./images/more.svg" alt="" />
            </span>
          </a>
        </div>
      </div>
    </div>
    <div class="floating-action-button u-flex-center">
      <svg
        fill="#ffffff"
        height="24"
        viewBox="0 0 24 24"
        width="24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"
        />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>

    <div id="toast__container">
      <div class="toast__cell">
        <div class="toast toast--green">
          <div class="toast__icon">
            <img src="./images/icon.svg" alt="" />
          </div>
          <div class="toast__content">
            <p class="toast__type">Success</p>
            <p class="toast__message">
              Congratulations, added to the Favorites successfully
            </p>
          </div>
          <div class="toast__close">
            <img src="./images/close.svg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <script>
      // 评分星星的 DOM 结构
      let starInerHtml = `<li><img src="images/star.svg" alt=""></li>`;
      for (let index = 0; index < 5; index++) {
        $(".card-body-stars").append(starInerHtml);
      }

      // 点击收藏图标事件处理
      $(".card-body-option-favorite img").on("click", function () {
        let currentSrc = $(this).attr("src");
        if (currentSrc === "./images/hollow.svg") {
          $(this).attr("src", "./images/solid.svg");
          // 显示成功提示框
          $("#toast__container").css("display", "block");
          // 2 秒后自动隐藏提示框
          setTimeout(() => {
            $("#toast__container").css("display", "none");
          }, 2000);
        } else {
          $(this).attr("src", "./images/hollow.svg");
          // 取消收藏时隐藏提示框
          $("#toast__container").css("display", "none");
        }
      });

      // 点击关闭按钮隐藏提示框
      $(".toast__close").on("click", function () {
        $("#toast__container").css("display", "none");
      });
    </script>
  </body>
</html>

代码解析📑

一、HTML 部分

1. 头部部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>大电影</title>
    <script src="./js/jquery.min.js"></script>
</head>

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="en">：定义 HTML 文档的根元素，lang="en" 表示页面语言为英语。
<meta> 标签：
- charset="UTF-8"：设置字符编码为 UTF - 8，确保支持各种语言字符。
- http-equiv="X-UA-Compatible" content="IE=edge"：让 Internet Explorer 以最新版本渲染页面。
- name="viewport" content="width=device-width, initial-scale=1.0"：设置页面在移动设备上的布局，使页面宽度与设备宽度一致，初始缩放比例为 1。
<link rel="stylesheet" href="./css/style.css" />：引入外部 CSS 文件 style.css，用于设置页面的样式。
<title>大电影</title>：设置网页的标题，显示在浏览器的标签栏上。
<script src="./js/jquery.min.js"></script>：引入 jQuery 库，方便后续使用 jQuery 进行 DOM 操作和事件处理。

2. 主体部分 - 电影卡片展示

<body>
    <div class="container">
        <!-- Batman -->
        <div class="card u-clearfix">
            <div class="card-media">
                <img src="./images/lmf1.jpg" alt="" class="card-media-img" />
                <div class="card-media-preview u-flex-center">
                    <img src="./images/play.svg" alt="" />
                </div>
                <span class="card-media-tag card-media-tag-orange">Action</span>
            </div>
            <div class="card-body">
                <h2 class="card-body-heading">Batman</h2>
                <div class="card-body-options">
                    <div class="card-body-option card-body-option-favorite">
                        <img src="./images/hollow.svg" alt="" />
                    </div>
                    <div class="card-body-option card-body-option-share">
                        <img src="./images/share.svg" alt="" />
                    </div>
                </div>
                <ul class="card-body-stars u-clearfix"></ul>
                <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>
                <a href="#/" class="card-button card-button-link">
                    More info
                    <span class="card-button-icon">
                        <img src="./images/more.svg" alt="" />
                    </span>
                </a>
            </div>
        </div>
        <!-- 其他电影卡片类似，省略 -->
    </div>

<div class="container">：作为整个电影卡片的容器。
<div class="card u-clearfix">：表示一个电影卡片，u-clearfix 可能是用于清除浮动的类。
- <div class="card-media">：电影卡片的媒体区域，包含电影图片、播放预览图标和电影类型标签。
  - <img src="./images/lmf1.jpg" alt="" class="card-media-img" />：显示电影的图片。
  - <div class="card-media-preview u-flex-center">：播放预览图标容器，使用 u-flex-center 类进行居中布局。
  - <span class="card-media-tag card-media-tag-orange">Action</span>：电影类型标签，这里是动作片，card-media-tag-orange 可能用于设置标签的颜色。
- <div class="card-body">：电影卡片的主体区域，包含电影标题、操作选项、评分星星、购买按钮和更多信息按钮。
  - <h2 class="card-body-heading">Batman</h2>：电影标题。
  - <div class="card-body-options">：操作选项容器，包含收藏图标和分享图标。
    - <div class="card-body-option card-body-option-favorite">：收藏图标容器，初始显示空心图标。
    - <div class="card-body-option card-body-option-share">：分享图标容器。
  - <ul class="card-body-stars u-clearfix"></ul>：评分星星的无序列表，初始为空，后续通过 JavaScript 动态添加。
  - <a href="#/" class="card-button card-button-cta"> Buy $12.99 </a>：购买按钮，card-button-cta 可能用于设置按钮的样式。
  - <a href="#/" class="card-button card-button-link">：更多信息按钮，包含一个图标。

3. 主体部分 - 浮动操作按钮和提示框

    <div class="floating-action-button u-flex-center">
        <svg
            fill="#ffffff"
            height="24"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"
            />
            <path d="M0 0h24v24H0z" fill="none" />
        </svg>
    </div>

    <div id="toast__container">
        <div class="toast__cell">
            <div class="toast toast--green">
                <div class="toast__icon">
                    <img src="./images/icon.svg" alt="" />
                </div>
                <div class="toast__content">
                    <p class="toast__type">Success</p>
                    <p class="toast__message">
                        Congratulations, added to the Favorites successfully
                    </p>
                </div>
                <div class="toast__close">
                    <img src="./images/close.svg" alt="" />
                </div>
            </div>
        </div>
    </div>

<div class="floating-action-button u-flex-center">：浮动操作按钮，使用 SVG 图标，u-flex-center 用于居中布局。
<div id="toast__container">：收藏成功提示框容器，初始状态下可能通过 CSS 设置为隐藏。
- <div class="toast__cell">：提示框的单元格。
- <div class="toast toast--green">：提示框主体，toast--green 可能用于设置提示框的颜色。
  - <div class="toast__icon">：提示框图标。
  - <div class="toast__content">：提示框内容，包含提示类型和提示信息。
  - <div class="toast__close">：提示框关闭按钮，点击可关闭提示框。

二、JavaScript 部分

1. 评分星星添加

<script>
    // 评分星星的 DOM 结构
    let starInerHtml = `<li><img src="images/star.svg" alt=""></li>`;
    for (let index = 0; index < 5; index++) {
        $(".card-body-stars").append(starInerHtml);
    }

let starInerHtml = <li><img src="images/star.svg" alt=""></li>;：定义一个字符串变量 starInerHtml，表示一个包含星星图标的列表项。
for (let index = 0; index < 5; index++)：循环 5 次。
$(".card-body-stars").append(starInerHtml);：使用 jQuery 的 append() 方法将 starInerHtml 追加到所有类名为 card-body-stars 的元素内部，为每个电影卡片添加 5 颗星星。

2. 收藏图标点击事件处理

    // 点击收藏图标事件处理
    $(".card-body-option-favorite img").on("click", function () {
        let currentSrc = $(this).attr("src");
        if (currentSrc === "./images/hollow.svg") {
            $(this).attr("src", "./images/solid.svg");
            // 显示成功提示框
            $("#toast__container").css("display", "block");
            // 2 秒后自动隐藏提示框
            setTimeout(() => {
                $("#toast__container").css("display", "none");
            }, 2000);
        } else {
            $(this).attr("src", "./images/hollow.svg");
            // 取消收藏时隐藏提示框
            $("#toast__container").css("display", "none");
        }
    });

$(".card-body-option-favorite img").on("click", function () {... })：使用 jQuery 的 on() 方法为所有收藏图标绑定 click 事件。
let currentSrc = $(this).attr("src");：获取当前被点击收藏图标的 src 属性值。
if (currentSrc === "./images/hollow.svg")：判断当前图标是否为空心图标。
- 如果是空心图标，将图标的 src 属性值修改为实心图标的路径，显示提示框（将提示框的 display 属性设置为 block），并设置一个 2 秒的定时器，2 秒后隐藏提示框（将提示框的 display 属性设置为 none）。
如果不是空心图标（即为实心图标），将图标的 src 属性值修改为空心图标的路径，并隐藏提示框。

3. 提示框关闭按钮点击事件处理

    // 点击关闭按钮隐藏提示框
    $(".toast__close").on("click", function () {
        $("#toast__container").css("display", "none");
    });
</script>

$(".toast__close").on("click", function () {... })：使用 jQuery 的 on() 方法为所有提示框关闭按钮绑定 click 事件。
$("#toast__container").css("display", "none");：当点击关闭按钮时，将提示框的 display 属性设置为 none，隐藏提示框。

三、工作流程 ▶️

浏览器加载 HTML 文件，解析 HTML 结构，引入 CSS 样式和 jQuery 库。
页面渲染电影卡片、浮动操作按钮和隐藏的提示框。
JavaScript 代码为每个电影卡片添加 5 颗星星。
用户点击收藏图标，触发收藏图标点击事件处理函数：
- 判断图标状态，切换图标样式。
- 如果是从空心到实心，显示提示框并设置定时器自动隐藏。
- 如果是从实心到空心，直接隐藏提示框。
用户点击提示框关闭按钮，触发关闭按钮点击事件处理函数，隐藏提示框。