时间戳

首页 > 解决方案 > Javascript - 图像大小之间的 Onclick 切换

javascript - Javascript - 图像大小之间的 Onclick 切换

问题描述

我有多个图像，例如图像 A、图像 B 和图像 C。当我单击图像时，AI 希望它放大。然后，当我单击图像 BI 时，希望图像 A 恢复到其原始大小并放大 B。

这是我正在工作的代码笔： https ://codepen.io/anon/pen/BWXrEv

帮助将不胜感激。

html代码：

<img class="image" src="http://images.e-flux- 
systems.com/646a999d89943180a9b4916b17fd7bac.jpg,2000" alt="" />

<img class="image" src="http://images.e-flux- 
systems.com/2012_09_01the_internet.jpg,1440" alt="" />

CSS：

.image {
 width: 150px;
}

.image.enlarge {
 width: 600px;;
}

JS：

 $(document).ready(function() {
   $('.image').click(function() {
    $(this).toggleClass('enlarge');
   });
  });

标签： javascriptjqueryonclickimage-size

解决方案

首先，您必须.enlarge从类名所在的所有现有元素中删除现有类（如果有），并仅在当前单击的元素上.image添加.enlarge该类。

$(document).ready(function() {
  $('.image').click(function() {
    $(".image").removeClass('enlarge');
    $(this).toggleClass('enlarge');
  });
});
.image {
  width: 150px;
}

.image.enlarge {
  width: 600px;
  ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image" src="http://images.e-flux-systems.com/646a999d89943180a9b4916b17fd7bac.jpg,2000" alt="" />

<img class="image" src="http://images.e-flux-systems.com/2012_09_01the_internet.jpg,1440" alt="" />

推荐阅读