Question

<div>
   <img src="1.jpg">
   <img src="2.jpg">
</div>

<div>
   <img src="3.jpg">
   <img src="4.jpg">
</div>

要求就是这样 - 点击图片＆＃39; 2.jpg＆＃39; image＆＃39; 1.jpg＆＃39;应点击图片＆＃39; 4.jpg＆＃39;图像＆＃39; 3.JPG＆＃39;应该放大等等。可以有任何数量的这些div。 Image 2/4/6 ...是动态图像。图像1/3/5 ...就像静态缩放图标。

$(function() {

到目前为止我做了什么

$('img').on('click', function() {

 $('.zoomImageClass').attr('src', $(this).attr('src'));

 $('#zoomImageId').modal('show');
});

}）;

但是这里点击的图片正在变焦。我希望缩放图像，以便单击缩放图标。

Answer 1

<div>
  <img class="sourceImageClass" src="http://via.placeholder.com/350x350">
  <img class="zoomImageClass" src="http://via.placeholder.com/5x5">
</div>

<div>
  <img class="sourceImageClass" src="http://via.placeholder.com/300x300">
  <img class="zoomImageClass" src="http://via.placeholder.com/5x5">
</div>

<img id="zoomImageId">

然后在JS

$(function() {
$("div img.zoomImageClass").each(function(i,el){
    $(el).click(function(){
    console.log($(el).attr("src"));
  var imageURL=$(el).parent().find(".sourceImageClass").attr("src");
  $("#zoomImageId").attr("src", imageURL)
});

}）; }）;

工作小提琴 https://jsfiddle.net/hanalulu/trpdqxac/2/

如果您需要更多帮助，请不要忘记接受我的回答并对我的回答发表评论。

Answer 2

我可能误解了你的问题 - 我会删除我的回答是这样的，但在我看来，你感觉过于复杂。以下是使用jQuery＆＃39; siblings。

的示例

＆＃13;

$(function() {
  $('div > img:last-child').on('click', function() {
  $(this).siblings("img:first-child").toggleClass("zoom");
  });
});

＆＃13;

img {
  width: 300px;
  height: 300px;
}

.zoom {
  transform: scale(2);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/An_Indian_tiger_in_the_wild._Royal%2C_Bengal_tiger_%2827466438332%29.jpg/1200px-An_Indian_tiger_in_the_wild._Royal%2C_Bengal_tiger_%2827466438332%29.jpg">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/An_Indian_tiger_in_the_wild._Royal%2C_Bengal_tiger_%2827466438332%29.jpg/1200px-An_Indian_tiger_in_the_wild._Royal%2C_Bengal_tiger_%2827466438332%29.jpg">
</div>

<div>
   <img src="http://animals.sandiegozoo.org/sites/default/files/inline-images/tiger_amur_snow.jpg">
   <img src="http://animals.sandiegozoo.org/sites/default/files/inline-images/tiger_amur_snow.jpg">
</div>

＆＃13;

从单击其他图像缩放一个图像

2 个答案: