基于JQuery实现点击图片切换类以调整尺寸的技术需求

需求：点击图片时，为其添加/移除指定类，使图片应用该类定义的尺寸。

修正后的完整代码实现 #

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photo_main">
  <img src="http://placekitten.com/350/200" alt="示例图片">
</div>

CSS 代码

.photo_main {
  text-align: center;
  margin: 5rem auto 2rem;
  cursor: pointer;
}

.photo_main>img {
  width: 350px;
  height: 250px;
  transition: all 0.3s ease; /* 添加过渡动画让尺寸变化更平滑 */
}

.size_img {
  width: 850px !important;
  height: 550px !important;
}

JavaScript 代码

$(document).ready(function() {
  $('.photo_main>img').click(function() {
    // 使用toggleClass直接切换size_img类，实现尺寸切换
    $(this).toggleClass('size_img');
  });
});

代码说明 #

• HTML：引入jQuery库，搭建包含图片的基础结构。
• CSS：设置容器布局样式，定义图片默认尺寸和放大后的尺寸（用!important确保样式优先级），添加过渡动画优化交互体验。
• JavaScript：监听图片点击事件，通过toggleClass方法切换目标类，实现点击图片在默认尺寸与放大尺寸间切换。

原代码问题修正：

1. jQuery的click方法仅支持单个回调函数，原代码中的第二个回调是无效写法。
2. toggleClass需传入类名而非选择器，原代码中传入.photo_main > img属于误用。

内容的提问来源于stack exchange，提问作者Developer