javascript - 如何用一键替换Image src attr？ jQuery的

我在四个较小的图像上方有一个图像。当用户单击较小图像之一时，较小图像将占据较大图像的位置。但是仍然保留在原来的位置。我认为我即将解决问题，但需要帮助。

的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);
    });

最佳答案

尝试使用$(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);
    });