Question

我在四张较小的图像上方有一张图像。当用户单击其中一个较小的图像时，较小的图像会占用较大的图像。但仍然留在原来的位置。我想我已接近解决它但需要帮助。

HTML

        <div class="col-md-8 modal-images">
         <div class="row large-image">
         <div class="col-md-12">
            <img src="One.png">
             </div>
          </div>
          <br/>
          <div class="row small-image">
              <div class="col-md-4">
                  <img src="One.png">
              </div>
              <div class="col-md-4">
                  <img src="Two.jpg">
              </div>
              <div class="col-md-4">
                  <img src="Three.jpg">  
              </div>
              <div class="col-md-4">
                  <img src="Four.jpg">
              </div>
          </div>
          </div>

JS

$('.small-image img').closest('.col-md-4').click(function(){
        var newimage = ($('.small-image img').closest('.col-md-4').find('img').attr('src'));
       $('.large-image img').attr('src', newimage); 
    });

Answer 1

尝试使用$(this).

$('.small-image img').closest('.col-md-4').click(function(){
        var newimage = ($(this).closest('.col-md-4').find('img').attr('src'));
  console.log(newimage)
       $('.large-image img').attr('src', newimage); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-8 modal-images">
         <div class="row large-image">
         <div class="col-md-12">
            <img src="One.png">
             </div>
          </div>
          <br/>
          <div class="row small-image">
              <div class="col-md-4">
                  <img src="One.png">
              </div>
              <div class="col-md-4">
                  <img src="Two.jpg">
              </div>
              <div class="col-md-4">
                  <img src="Three.jpg">  
              </div>
              <div class="col-md-4">
                  <img src="Four.jpg">
              </div>
          </div>
          </div>

替代方式

它的目标是父.so与子img

匹配

$('.small-image img').closest('.col-md-4').click(function(){
        var newimage = ($(this).children('img').attr('src'));
  console.log(newimage)
       $('.large-image img').attr('src', newimage); 
    });

Answer 2

在点击处理程序中，＆＃39;这个＆＃39;关键字将引用.col-md-4 div。因此，考虑到以下工作：

$('.small-image img').closest('.col-md-4').click(function(){
    var newimage = ($(this).find('img').attr('src'));
   $('.large-image img').attr('src', newimage); 
});

如何用单击替换Image src attr？ jQuery的

2 个答案: