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

【问题标题】：Javascript - Onclick toggle between image sizeJavascript - 图像大小之间的 Onclick 切换
【发布时间】：2019-11-24 16:52:29
【问题描述】：

我有多个图像，例如图像 A、图像 B 和图像 C。当我单击图像 A 时，我希望它放大。当我然后单击图像 B 时，我希望图像 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');
   });
  });

【问题讨论】：

如果回答有帮助，请标记为回答！

标签： javascript jquery onclick image-size

【解决方案1】：

我认为快速解决方法是在将类添加到另一个图像之前从所有图像中删除 .enlarge 类。试试这个：

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

希望这可行！

另外，你的 CSS 中有一个额外的分号，所以要小心！

【讨论】：

【解决方案2】：

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

$(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="" />

【讨论】：