Javascript

Question

我有多张图片，比如图片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');
   });
  });

Answer 1

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

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

希望这能奏效！

此外，您的 CSS 中多了一个分号，请注意！

Answer 2

首先，您必须从 class 名称为 .image 的所有现有元素中删除现有的 .enlarge class，然后添加 .enlarge class 仅在当前点击的元素上。

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

Javascript - 点击图片大小切换

Javascript - Onclick toggle between image size

jquery

onclick

image-size