Question

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

点击图像时，您需要先从图像中删除放大类别（如果有），然后将放大切换为当前类别。

$('.image').removeClass('enlarge');

下面的工作代码

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

.image {
  width: 150px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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="" />

Answer 2

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

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

希望这可行！

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

Answer 3

首先，您必须从类名称为.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="" />

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

3 个答案: