Javascript-Onclick在图像大小之间切换

Question

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

这是codepen我正在工作： 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');
   });
  });

Answer 1

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

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

希望这有效！

另外，您的CSS中还有一个多余的分号，因此请当心！

Answer 2

首先，必须从类名称为.image所有现有元素中删除现有的.enlarge类，并仅在当前单击的元素上添加.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="" />